:required
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The :required
CSS pseudo-class represents any ,
, or
element that has the
required
attribute set on it.
Try it
label {
display: block;
margin-top: 1em;
}
.req {
color: red;
}
*:required {
background-color: gold;
}
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
:required {
/* ... */
}
Accessibility
Mandatory 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.
Examples
The required field has a red border
HTML
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
Specifications
Specification |
---|
HTML # selector-required |
Selectors Level 4 # required-pseudo |
Browser compatibility
See also
- Other validation-related pseudo-classes:
:optional
,:invalid
,:valid
- Form data validation