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; } 

: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; } 

Result

Accessibility 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.0

Specifications

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