:required CSS Pseudo Class
Description
The :required pseudo-class in CSS is used to target and style HTML form elements that have the required attribute set. This pseudo-class is primarily used to apply specific styles or visual cues to mandatory form fields, indicating to users that they must fill in those fields before submitting the form.
For example, you can use :required to change the border color or background of a required input field to make it stand out visually. Here's a simple example of how you might use it in CSS:
input:required {
border-color: red;
}
In this example, any
<input> element with the required attribute set will have a red border, making it visually distinct from other non-required form fields. This can help improve the user experience by providing clear feedback on which fields are mandatory.
Syntax
:required {
/* ... */
}
Example
<p>
<label for="user">Username</label><input id="user" type="text" required>
</p>
<p>
<label for="email">E-mail</label><input id="email" type="text" required>
</p>
<p><label for="text">Message</label> <textarea cols="40" rows="10" id="text"></textarea>
</p>
<p>
<label> </label><input type="submit" id="send" value="Submit">
</p>p {
margin: 0 0 5px;
}
label {
display: block;
}
input[type="text"], textarea {
width: 320px;
}
input:required {
border: 2px solid red;
}Browser Support
The following table will show you the current browser support for the CSS :required pseudo class.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 12 | 10 | 4 | 10 | 5 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 4 | 10.1 | 5 | 1 | 4.4.3 |
Last updated by CSSPortal on: 1st October 2023