You can use CSS pseudo-elements like :before and :after to add content before or after an element without changing the HTML. However, these pseudo-elements won’t work directly with a <input> field because input elements are self-closing and don’t support :before and :after by default. Let’s discuss these methods in this blog.
Table of Contents:
The :before and :after pseudo-elements need a parent element that can handle the extra added content. The <input> field doesn’t hold any additional content since it is a self-closing tag. That is why pseudo-elements do not work.
You can use methods such as Wrapping the Input Inside a Parent Element, using a label Element with :before and :after, and using a Pseudo-Element on a span inside the Wrapper for this purpose. Let’s discuss them below.
You can make the input field get placed inside the <div> or <label> element by applying the pseudo-elements to the wrapper. You can actually place the input field inside the <div> and apply the :before to the wrapper instead. You can also add the icon or label in the input field.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input with Pseudo-Elements</title>
<style>
.input-wrapper {
position: relative;
display: inline-block;
}
.input-wrapper:before {
content: "🔍"; /* Unicode search icon */
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: gray;
}
.input-wrapper input {
padding-left: 30px; /* Adjust padding to accommodate the icon */
height: 30px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="input-wrapper">
<input type="text" placeholder="Search here">
</div>
</body>
</html>
Output:
Explanation: In this code, we added the icon to the input field. To display the icon before the input field, you can use the :before pseudo-element. This element places the icon to the left and vertically aligned in the center. You can use padding-left: 30px for the icon space.
Method 2: Use a Label Element with :before and :after
You can use this method to create some icons or text before the input field. Since the labels are related to the input field, the user clicks on the label to focus on the input fields, which makes it more accessible.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input with Label</title>
<style>
.input-label {
position: relative;
display: inline-block;
}
.input-label:before {
content: "✉️"; /* Unicode envelope icon */
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.input-label input {
padding-left: 30px;
height: 30px;
font-size: 16px;
}
</style>
</head>
<body>
<label class="input-label">
<input type="email" placeholder="Enter your email">
</label>
</body>
</html>
Output:
Explanation: Using this code, the input box with the placeholder is created and the envelope icon is added to the left side of the input field using :before and it is positioned using position: absolute. You can set the padding property to the input field to make sure the text doesn’t overlap the icon. The label element makes it more accessible since it provides more focus on the input field.
Method 3: Using a Pseudo-Element on a Span Inside the Wrapper
You can use the span element, which is placed inside the wrapper, to add the icon near the input field. For the :before pseudo-element, the span acts as the target for adding an icon in the input field.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input with Span</title>
<style>
.input-container {
position: relative;
display: inline-block;
}
.input-decorator:before {
content: "📅"; /* Unicode calendar icon */
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: gray;
}
.input-container input {
padding-left: 30px;
height: 30px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="input-container">
<span class="input-decorator"></span>
<input type="date">
</div>
</body>
</html>
Output:
Explanation: You can use the <span> and CSS for creating the icon near the input field. In this code, .input-decorator:before used for creating the icon in the input field. This element places the icon to the left and vertically aligned in the center. You can use padding-left: 30px for the icon space.
Conclusion
The above-discussed method is the most effective to use :before or :after pseudo-element to an input field using CSS. You can use methods such as wrapping the input inside a parent element, using a label element with :before and :after and using a pseudo-element on a span inside the wrapper for this purpose. This might indirectly improve the design and functionality of the webpage.
1. Can you directly use :before or :after on input fields?
No, the input fields are self-closing, and they do not support :before or :after directly.
2. How can you still use pseudo-elements with input fields?
You can use the pseudo-elements with input fields by wrapping them inside the <div> or <label> elements.
3. What can you add with :before or :after?
You can add some decorative content like icons, text or visual indicators with :before or :after elements.
4. Why use a wrapper for input fields?
You can style indirectly by keeping the input field functional and accessible.
5. Is using a label element better for accessibility?
Yes, using the <label> element with the pseudo-elements for better accessibility. Since the label is associated with input fields.