Open In App

Pure CSS Form Input Sizing

Last Updated : 31 Jan, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Forms are essential in websites to collect data or information for various purposes. Using Pure CSS Forms, we can create different types of forms.

The size of the inputs of forms is always important. So inputs are important in any webpage form. It is used to take various inputs from the user which are essential in collecting data or information. Input elements have fluid width sizes in a syntax that is similar to Pure Grids. You can apply a pure-input-* class to these elements.

Pure CSS form input sizing: To apply the different sizes of input fields, you have to get knowledge about Pure CSS Grid. Pure CSS Grid classes are used inside the input field to define the input field size.

Syntax:

<form class="pure-form">
    <input type="text" class="pure-button"/>
</form>

Example 1:

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
    integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
    crossorigin="anonymous"/>
    <meta name="viewport" content=
       "width=device-width,initial-scale=1.0" />
    <style>
        form {
            margin: 40px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>Pure CSS Forms Input Sizing</strong>
    </center>
        <form class="pure-form">
            <input type="text" class="pure-input-1" 
                   placeholder="Pure-input-1" />
            <br><br>
            <input type="text" class="pure-input-2-3" 
                   placeholder="Pure-input-2-3" />
            <br><br>
            <input type="text" class="pure-input-1-2" 
                   placeholder="Pure-input-1-2" />
            <br><br>
            <input type="text" class="pure-input-1-3" 
                   placeholder="Pure-input-1-3" />
            <br><br>
            <input type="text" class="pure-input-1-4" 
                   placeholder="Pure-input-1-4" />
        </form>
</body>
</html> 






                        










Output:


Pure CSS Form Input Sizing


Example 2:




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


<head> 


    <link rel="stylesheet"


    href= 


"https://unpkg.com/purecss@1.0.0/build/pure-min.css"


    integrity= 


"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"


    crossorigin="anonymous"/> 


    <meta name="viewport"


          content="width=device-width,initial-scale=1.0" /> 


    <style> 


        form { 


            margin: 40px; 


        } 


    </style> 


</head> 


  


<body> 


    <center> 


        <h1 style="color:green">GeeksforGeeks</h1> 


        <strong>Pure CSS Forms Input Sizing</strong> 


    </center> 


    <form class="pure-form pure-g"> 


        <div class="pure-u-1-4"> 


            <input type="text" class="pure-input-1" 


                   placeholder="Pure-u-1-4" /> 


        </div> 


        <br><br> 


        <div class="pure-u-3-4"> 


            <input type="text" class="pure-input-1" 


                   placeholder="Pure-u-3-4" /> 


        </div> 


        <br><br> 


        <div class="pure-u-1-2"> 


            <input type="text" class="pure-input-1" 


                   placeholder="Pure-u-1-2" /> 


        </div> 


        <br><br> 


        <div class="pure-u-1-2"> 


            <input type="text" class="pure-input-1" 


                   placeholder="Pure-u-1-2" /> 


        </div> 


        <br><br> 


        <div class="pure-u-1-8"> 


            <input type="text" class="pure-input-1" 


                   placeholder="Pure-u-1-8" /> 


        </div> 


        <br><br> 


        <div class="pure-u-1-8"> 


            <input type="text" class="pure-input-1" 


                   placeholder="Pure-u-1-8" /> 


        </div> 


        <br><br> 


        <div class="pure-u-1-4"> 


            <input type="text" class="pure-input-1" 


                   placeholder="Pure-u-1-4" /> 


        </div> 


        <br><br> 


        <div class="pure-u-1-2"> 


            <input type="text" class="pure-input-1" 


                   placeholder="Pure-u-1-2" /> 


        </div> 


        <br><br> 


        <div class="pure-u-1-5"> 


            <input type="text" class="pure-input-1" 


                   placeholder="Pure-u-1-5" /> 


        </div> 


        <br><br> 


        <div class="pure-u-2-5"> 


            <input type="text" class="pure-input-1" 


                   placeholder="Pure-u-2-5" /> 


        </div> 


        <br><br> 


        <div class="pure-u-2-5"> 


            <input type="text" class="pure-input-1" 


                   placeholder="Pure-u-2-5" /> 


        </div> 


        <br><br> 


        <div class="pure-u-1"> 


            <input type="text" class="pure-input-1" 


                   placeholder="Pure-u-1" /> 


        </div> 


    </form> 


</body> 


</html>



















                        







                        










Output:


Pure CSS Form Input Sizing
Pure CSS Form Input Sizing


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Pure CSS Form Grouped Inputs
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Pure.CSS Required Inputs
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bootstrap 5 Input group Sizing
            

        
    
        
            

                Bootstrap 5 Form Controls Sizing
            

        
    
        
            

                Bootstrap 5 Layout Horizontal form label sizing
            

        
    
        
            

                Pure CSS Aligned Form
            

        
    
        
            

                Pure CSS Form Read-Only Inputs
            

        
    
        
            

                Pure CSS Form Grouped Inputs
            

        
    
        
            

                Pure CSS Stacked Form
            

        
    
        
            

                Pure CSS Grids with Multi-Column Form
            

        
    
        
            

                CSS box-sizing Property
            

        
    
        
            

                Foundation CSS Global Style Font Sizing
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
S

        

            
        

        

                                    


                                    

                                        skyridetim                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox