Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Role of CSS :required Selector
The CSS :required pseudo-class selector is used to target form elements that have the required attribute. This selector allows you to apply specific styles to required form fields, helping users identify which fields are mandatory to fill out.
Syntax
:required {
/* CSS properties */
}
input:required {
/* Styles for required input elements */
}
Example: Styling Required Input Fields
The following example demonstrates how to style required input fields with a distinctive background color −
<!DOCTYPE html>
<html>
<head>
<style>
input:required {
background-color: #ffe6e6;
border: 2px solid #ff6b6b;
padding: 8px;
margin: 5px 0;
width: 200px;
}
input:not(:required) {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 8px;
margin: 5px 0;
width: 200px;
}
label {
display: block;
margin: 10px 0 5px 0;
font-weight: bold;
}
</style>
</head>
<body>
<form>
<label>Name (Required):</label>
<input type="text" name="name" required>
<label>Email (Required):</label>
<input type="email" name="email" required>
<label>Phone (Optional):</label>
<input type="tel" name="phone">
</form>
</body>
</html>
A form with three input fields appears. The required fields (Name and Email) have light red backgrounds with red borders, while the optional Phone field has a gray background with a light gray border.
Example: Enhanced Required Field Styling
You can combine the :required selector with other pseudo-classes for more sophisticated styling −
<!DOCTYPE html>
<html>
<head>
<style>
form {
max-width: 400px;
margin: 20px;
}
input:required {
border-left: 4px solid #e74c3c;
background-color: #fdf2f2;
}
input:required:focus {
border-left-color: #27ae60;
background-color: #f0fdf4;
outline: none;
box-shadow: 0 0 5px rgba(39, 174, 96, 0.3);
}
input:required:valid {
border-left-color: #27ae60;
background-color: #f0fdf4;
}
input {
width: 100%;
padding: 10px;
margin: 5px 0 15px 0;
border: 1px solid #ddd;
border-radius: 4px;
}
.required-asterisk {
color: #e74c3c;
font-weight: bold;
}
</style>
</head>
<body>
<form>
<label>Username <span class="required-asterisk">*</span></label>
<input type="text" name="username" required>
<label>Password <span class="required-asterisk">*</span></label>
<input type="password" name="password" required>
<label>Website (Optional)</label>
<input type="url" name="website">
</form>
</body>
</html>
A styled form appears with required fields having a red left border and light pink background. When focused or valid, the border turns green. Optional fields have standard styling.
Conclusion
The :required selector is essential for creating user-friendly forms by visually distinguishing mandatory fields. It enhances form accessibility and improves the user experience by clearly indicating which fields must be completed.
Updated on: 2026-03-15T12:24:19+05:30
245 Views
Advertisements