:required / :optional

Optionality

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 (tested using latest versions)

Desktop
Google Chrome
Yes
Mozilla Firefox
Yes
Safari
Yes
Opera Browser
Yes
Internet Explorer
Yes
Mobile
Android Browser
No
Chrome for Android
No
Mozilla Firefox Mobile
No
Safari iOS
No
Opera Mobile
No
IE Mobile
No

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.