Optionality :required / :optional

The optionality pseudo-classes match <form> elements which are required or optional.

:required
The :required pseudo-class represents an <input> element with a required attribute set on it.

:optional
The :optional pseudo-class represents an <input> element does not have a required attribute set on it.

Browser Support

Chrome Firefox Safari Opera IE Edge
Desktop yes yes yes yes yes yes
Mobile yes yes yes yes no yes

Syntax

E:required { /* Style properties */ }

E:optional { /* Style properties */ }

Example

/* In this example, all required input elements will be yellow, while the others are simply white. */

input:required {
background-color: yellow;
}

input:optional {
background-color: white;
}

Information is based on Selectors Level 4 - W3C Working Draft (last updated on May 2, 2013)
Copyright © 2013 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.