Open In App

How to create Underline Input Text Field using CSS ?

Last Updated : 07 Feb, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Input Text Field can be underlined by implementing different approaches to applying a bottom border to an input text field, using various methods such as HTML and CSS. Styling input text fields is a crucial aspect of web development, and adding a bottom border is a common way to enhance the visual appeal of these elements.

Table of Content

Using CSS border-bottom Property

The simplest way to add a bottom-border to an input text field is by using CSS. You can achieve this effect with the border-bottom property.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        How to Apply Bottom Border to 
        Input Text Field?
    </title>
  
    <style>
        body {
            text-align: center;
        }
  
        input {
            border: none;
            border-bottom: 5px solid green;
        }
    </style>
</head>
  
<body>
    <form>
        <label for="password">
            Password:
        </label>
          
        <input type="password" 
               id="password" 
               name="password" required>
          
        <button type="submit">Submit</button>
    </form>
</body>
  
</html>
 






                        










Output:


bottom-border


Using CSS border-bottom Property with Pseudo-elements


You can use pseudo-elements to target specific parts of an element and style them accordingly. Here, we’ll use the ::after pseudo-element to create a bottom border.


Example:




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <title> 


        How to Apply Bottom Border to  


        Input Text Field? 


    </title> 


  


    <style> 


        body { 


            text-align: center; 


        } 


  


        input:hover { 


            border: none; 


            border-bottom: 5px solid green; 


        } 


    </style> 


</head> 


  


<body> 


    <form> 


        <label for="password"> 


            Password: 


        </label> 


          


        <input type="password" 


               id="password" 


               name="password" required> 


          


        <button type="submit">Submit</button> 


    </form> 


</body> 


  


</html>



















                        







                        










Output:


bottom-border-2


Understanding the text-decoration Property


The text-decoration property in CSS is used to set or remove decorations from text. In this case, we’ll use it to create an underline for an input text field.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <title>Underlined Input Field</title> 


  


    <style> 


        body { 


            text-align: center; 


        } 


        input#password { 


            border: none; 


            outline: none; 


            padding: 5px; 


            font-size: 16px; 


            border-bottom: 5px solid green; 


        } 


    </style> 


</head> 


  


<body> 


    <form> 


        <label for="password"> 


            Password: 


        </label> 


          


        <input type="password" 


               id="password" 


               name="password" required> 


          


        <button type="submit">Submit</button> 


    </form> 


</body> 


  


</html>



















                        







                        










Output:


input-box




                                    


                                                                        

                                        

                                            

                                                

                                                    
V

        

            
        

        

                                                

                                                

                                                    vkash8574                                                

                                            

                                            

            
                                        

                                        

                                            
    

        
        
    
                                            

                                                
                                                
                                            

                                            

                                            Improve
                                                
                                            

                                        

                                    



                            

                            
 
                                

                                    
                                        Next Article
                                        
                                    
                                    
                                    

                                        How to Set the Gap Between Text and Underlining using CSS ?
                                    

                                

                                                        

                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
  
                        

                                                

                        
                                                    

                                
Similar Reads

                                

                                    
        
            

                
Which property is used to underline, overline, and strikethrough text using CSS ?

                
In this article, we will see the property that can be used to underline, overline, and strikethrough the text. text-decoration: The text-decoration property is used to add decoration to the text. This styling property is used to add decorations like underline, overline, and strikethrough. This property is also used as a shorthand property for the b

            

            
            

                
                2 min read
            

        
    
        
            

                
How to place cursor position at end of text in text input field using JavaScript ?

                
In this article, we are going to learn about how to place the cursor at the end of the text in a text input element using JavaScript.  At first, we are going to create a text input box where some value will be given and a button to place the cursor at the end. We can place the cursor at the end of the text in a text input element by using different

            

            
            

                
                2 min read
            

        
    
        
            

                
CSS text-underline-offset Property

                
In this article, we'll discuss the text-underline-offset property in CSS. It is used with an underlined text but it's not part of it. To set the offset distance of the underline from its original position. By default, it is set to auto, but we may increase it by specifying the length or percentage. If any element contains multiple text-decoration l

            

            
            

                
                2 min read
            

        
    
        
            

                
CSS text-underline-position Property

                
The CSS text-underline-position is a property that determines the position of the underline that appears below the text. This property is used to control the spacing between the text and the underline, and can be used to customize the appearance of underlined text. Syntax: The following is the syntax for the text-underline-position property: text-u

            

            
            

                
                3 min read
            

        
    
        
            

                
How to add underline to canvas-type text using Fabric.js ?

                
In this article, we are going to see how to add underline to the canvas-like text using FabricJS. The canvas means text written is movable, rotatable, resizable, and can be stretched. But in this article, we will add underline to the text. Further, the text itself cannot be edited like a textbox.Approach: To make it possible we are going to use a J

            

            
            

                
                2 min read
            

        
    
        
            

                
How to underline all words of a text using jQuery ?

                
Given a statement and the task is to underline all the text words of HTML page using jQuery. We will use text-decoration property to add underline to each words. HTML code: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; p span { text-decoration: underline; } &lt;/style&gt; &lt;script src= &quot;https://code.jquery.com/jque

            

            
            

                
                2 min read
            

        
    
        
            

                
How to apply bottom border with only Input text field using CSS ?

                
Adding a bottom border to the input field visually distinguishes it from surrounding elements on the page. Making input fields stand out on a website in a form for example is crucial. Styling these inputs with clear borders, appealing colors, and effects, can easily capture the user’s attention. Table of Content Using the outline and border-bottom

            

            
            

                
                3 min read
            

        
    
        
            

                
How to Underline Text of a Div Element in JavaScript ?

                
Underlining text of a div can help to emphasize certain words or phrases and make them stand out from the rest of the content on the page. To underline text in a div element using JavaScript, you can use the style property of div to text-decoration. Text Decoration: The text-decoration property is used to specify whether the text should be Underlin

            

            
            

                
                3 min read
            

        
    
        
            

                
How to underline a text content in HTML ?

                
HTML, the foundation of web content, offers a variety of ways to emphasize text. One such method is underlining text. This guide will provide a comprehensive walkthrough on how to underline text in HTML, ensuring your content stands out. Underlined text serves an important role in web content. It not only highlights important information but also i

            

            
            

                
                3 min read
            

        
    
        
            

                
How to add Underline and Justify text buttons in WordPress ?

                
WordPress is an open-source Content Management System that is based on PHP and MySQL and is used to create a dynamic website. It was developed by Matt Mullenweg and Written in PHP. WordPress is one of the most popular that allows customizing and managing the website from its back-end content management system. In the Visual editor of WordPress by d

            

            
            

                
                3 min read
            

        
                                    

                                                                    
                                                            

                        

                        

                                                            

                                    
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