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.

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

My Personal Notes

Recommended Posts: