How to select text input fields using CSS selector ?

Last Updated : 08 Mar, 2019

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.

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

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

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes

Related Articles