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.
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:
Share your thoughts in the comments
Please Login to comment...