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

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.

Specifications

Specification Status Comment
HTML Living Standard
The definition of ':optional' in that specification.
Living Standard No change.
HTML5
The definition of ':optional' in that specification.
Recommendation Defines the semantics of HTML and constraint validation.
Selectors Level 4
The definition of ':optional' in that specification.
Working Draft No change.
CSS Basic User Interface Module Level 3
The definition of ':optional' in that specification.
Proposed Recommendation Defines the pseudo-class, but not the associated semantics.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support10 Yes410105
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ?4.4 Yes4105 Yes

See also

Document Tags and Contributors

Last updated by: mfuji09,