: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.

Syntax

:optional

Examples

See :invalid for an example.

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

Browser compatibility

See also

• Other validation-related pseudo-classes: :required, :invalid, :valid
• Form data validation