How to create Underline Input Text Field using CSS ?
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:
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:
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:
Contact Us