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.
:optional
See :invalid
for an example.
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.
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. |
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 |
:required
, :invalid
, :valid
© 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