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






                        filter_none








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







                        filter_none








Output:







    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
ashishsaini3
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.