:required
The :required
CSS pseudo-class represents any <input>
, <select>
, or <textarea>
element that has the required
attribute set on it.
Try it
This pseudo-class is useful for highlighting fields that must have valid data before a form can be submitted.
Note: The :optional
pseudo-class selects optional form fields.
Syntax
css
:required {
/* ... */
}
Examples
The required field has a red border
HTML
html
<form>
<div class="field">
<label for="url_input">Enter a URL:</label>
<input type="url" id="url_input" />
</div>
<div class="field">
<label for="email_input">Enter an email address:</label>
<input type="email" id="email_input" required />
</div>
</form>
CSS
css
label {
display: block;
margin: 1px;
padding: 1px;
}
.field {
margin: 1px;
padding: 1px;
}
input:required {
border-color: #800000;
border-width: 3px;
}
input:required:invalid {
border-color: #c00000;
}
Result
Accessibility concerns
Mandatory <input>
s should have the required
attribute applied to them. This will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful submission.
If the form also contains optional inputs, required inputs should be indicated visually using a treatment that does not rely solely on color to convey meaning. Typically, descriptive text and/or an icon are used.
Specifications
Specification |
---|
HTML Standard # selector-required |
Selectors Level 4 # opt-pseudos |
Browser compatibility
BCD tables only load in the browser
See also
- Other validation-related pseudo-classes:
:optional
,:invalid
,:valid
- Form data validation