Open In App

How to select text input fields using CSS selector ?

Last Updated : 03 Aug, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

CSS attribute selector is used to target input text fields. The input text fields of type ‘text’ can be targeted by using input[type=text].

Note: It is specified that the default attribute values may not always be selectable with attribute selectors, one could try to cover other cases of markup for which text inputs are rendered.

  • input:not([type]): It is used when the type attribute is not present in the markup.
  • input[type = “”]: It is used when the type attribute is present but empty.
  • input[type = text]: It is used when the type attribute is explicitly defined as ‘text’.

Example 1: This example selects the input text fields and uses some CSS property.

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        input[type="text"] {
            width: 400PX;
            display: block;
            background:lightgreen;
            color:black;
            text-align:justiy;
            font-size: 150%;
        }
         
        form {
            display:table-cell;
            width:50%;
            padding:10px;
        }
    </style>
</head>
 
<body>
    <form name="input"
          action=""
          method="get">
 
        Bestplatform :
        <input type="text"
               name="Name"
               value="GfG"
               size="20">
 
        Fullform :
        <input type="text"
               name="Name"
               value="GeeksforGeeks"
               size="20">
    </form>
</body>
 
</html>


Output:

Example 2: This example selects the input text fields and use some CSS property.

html




<!DOCTYPE html>
<html>
 
<head>
     
    <!-- CSS style to select type attribute -->
    <style>
        input[type="text"] {
            width: 400PX;
            display: block;
            background:green;
            color:white;
            text-align:justiy;
            font-size: 150%;
        }
         
        form {
            display:table-cell;
            width:50%;
            padding:10px;
        }
    </style>
</head>
 
<body>
    <form name="input"
          action=""
          method="get">
 
        USER : <input type="text"
                      name="Name"
                      value="GeeksforGeeks"
                      size="20">
 
        PASSWORD : <input type="text"
                          name="Name"
                          value="geeksforgeeks"
                          size="20">
 
        CATEGORY : <input type="text"
                          name="Name"
                          value="Studying platform"
                          size="20">
    </form>
</body>
 
</html>


Output:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments