How to apply bottom border with only Input text field using CSS ?
Last Updated :
24 Jul, 2024
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.
Using border-width Property
The border-width property in CSS is used to set the width of the border on all four sides of an element. It is a shorthand property that allows you to set the width of the top, right, bottom, and left borders. To style the border at the bottom set the property outline: 0; removes the default focus outline on the input field. Then, The border-width: 0 0 2px; sets the border width for the input field, applying a 2-pixel bottom border.
Example: Illustration of the bottom border with only the Input text field using the border-width property.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Bottom border on input text field</title>
<style>
div {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
color: green;
}
input {
outline: 0;
border-width: 0 0 2px;
border-color: green;
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
<input type="text"
placeholder="Enter your message.."
id="geek"
name="geek" />
</div>
</body>
</html>
Output:
Using the ::after pseudo-element
The ::after pseudo-element in CSS is used to insert content after an element's actual content. It is often used for decorative purposes or to add additional styling elements. The .input-field::after, Selects the ::after pseudo-element of elements with the class .input-field. The property bottom: -2px; shifts the pseudo-element 2 pixels below the bottom edge of the .input-field container, creating the effect of a bottom border. Sets the height to 2 pixels, defining the thickness of the bottom border.
Example: Illustration of the bottom border with only the Input text field using the ::after pseudo-element.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Bottom border on input text field</title>
<style>
.wrapper {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
color: green;
}
.input-field {
position: relative;
}
.input-field::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: green;
bottom: -2px;
left: 0;
}
input {
border: none;
outline: none;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>GeeksforGeeks</h1>
<div class="input-field">
<input type="text"
placeholder="Enter your message.."
id="geek"
name="geek" />
</div>
</div>
</body>
</html>
Output:
Similar Reads
How to set Input Fields with Black Border on Focus using CSS ? The visual cues play a crucial role in guiding user interaction in web design. One common interaction is when users focus on input fields, such as text boxes or text areas, during form filling. To enhance the user experience, it's essential to provide clear feedback when an input field is in focus.
2 min read
How to set the width of the bottom border in CSS ? In this article we will learn about how to set the width of the bottom border in CSS, We can set the width of the bottom border using the border-bottom-width CSS property. We can give the size in pixels and also can give predefined values such as thick, thin...etc. Approach 1: We will use inline CSS
2 min read
How to add border-bottom to table row <tr> in CSS ? A border is an important component of any table in HTML. It is used to define the boundaries of the table and its elements. The border-bottom property is used to add a border to the bottom of an HTML element. In this article, we will discuss how to add a border-bottom to table row <tr>. When a
3 min read
How to Add Background Color in Input and Text Fields using CSS ? In this article, we will explore different approaches to adding background color to input and text fields using CSS. Customizing the appearance of input and text fields is an essential aspect of web design, and changing the background color is a powerful way to enhance the visual appeal of these ele
2 min read
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 a
2 min read