W3cubDocs

/CSS

: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

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.
Recommendation Defines the pseudo-class, but not the associated semantics.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 10 Yes 4 10 10 5
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support ? 18 Yes 4 10 5 Yes

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:optional