:required
Quick Summary for :required
:required
CSS pseudo-class represents any <input>
, <select>
, or <textarea>
element that has the required
attribute set on it.
Code Usage for :required
/* Selects any required <input> */ input:required { border: 1px dashed red; }
More Details for :required
:required
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
The required field has a red border
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 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; }
ResultAccessibility 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.0Specifications
Specification |
---|
HTML Standard # selector-required |
Selectors Level 4 # opt-pseudos |
See also
Other validation-related pseudo-classes::optional
, :invalid
, :valid
Form data validation Last modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)DeutschEspañolFrançais日本語Português (do Brasil)Русский中文 (简体) Change language