How to create Underline Input Text Field using CSS ?

Last Updated : 07 Feb, 2024

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
Using CSS border-bottom Property with Pseudo-elements
Understanding the text-decoration Property

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