How to select text input fields using CSS selector ?

CSS attribute selector is used to targeting an input text fields. The input text fields of type ‘text’ can be targeting 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 type attribute is not present in the markup.
  • input[type = “”]: It is used when type attribute is present, but empty.
  • input[type = text]: It is used when type attribute is explicitly defined as ‘text’.

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.