CSS Selector Level 4 » Optionality pseudo-class

The pseudo-class optionality is for form elements which are required or optional. Every input element which isn't :required is selected by :optional.

Syntax

Copy
:required {
    /* declarations */
}

:optional {
    /* declarations */
}

Example

Copy
:required {
    border: 1px solid red;
}
 
:optional {
    border: 1px solid gray;
}

The example adds a gray border to the optional input element and a red border to the required input element.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (8.0) Yes (4.0) Yes (5.0) Yes (12.0) Yes (10) Yes (9.5)
Mobile Yes (59) Yes (4.0) Yes (5.0) Yes (12.0) Yes (10.0) Yes (10.0)

Usage statistics (Alexa Top 500,000 sites)


Please wait a moment, the comments start loading now...
explorermozillachromesafariopera