The :required
CSS pseudo-class represents any <input>
, <select>
, or <textarea>
element that has the required
attribute set on it.
/* Selects any required <input> */ input:required { border: 1px dashed red; }
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
Examples
See :invalid
for an example.
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.
- MDN Understanding WCAG, Guideline 3.3 explanations
- Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of ':required' in that specification. |
Living Standard | No change. |
HTML5 The definition of ':required' in that specification. |
Recommendation | Defines the semantics of HTML and constraint validation. |
Selectors Level 4 The definition of ':required' in that specification. |
Working Draft | No change. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:required | Chrome Full support 10 | Edge Full support 12 | Firefox Full support 4 | IE Full support 10 | Opera Full support 10 | Safari Full support 5 | WebView Android Full support 4.4.3 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 5 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
See also
- Other validation-related pseudo-classes:
:optional
,:invalid
,:valid
- Form data validation