:optional
Quick Summary for :optional
:optional
CSS pseudo-class represents any <input>
, <select>
, or <textarea>
element that does not have the required
attribute set on it.
Code Usage for :optional
/* Selects any optional <input> */ input:optional { border: 1px dashed black; }
More Details for :optional
:optional
The :optional
CSS pseudo-class represents any <input>
, <select>
, or <textarea>
element that does not have the required
attribute set on it.
/* Selects any optional <input> */ input:optional { border: 1px dashed black; }
This pseudo-class is useful for styling fields that are not required to submit a form.
Note: The :required
pseudo-class selects required form fields.
Syntax
:optional
Examples
The optional field has a purple 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:optional { border-color: rebeccapurple; border-width: 3px; }
ResultAccessibility concerns
If a form contains optional <input>
s, required inputs should be indicated using the required
attribute. 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 form submission.
Required inputs should also 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-optional |
Selectors Level 4 # opt-pseudos |
See also
Other validation-related pseudo-classes::required
, :invalid
, :valid
Form data validation Select your preferred language English (US)DeutschEspañolFrançais日本語Português (do Brasil)Русский中文 (简体) Change language