:in-range / :out-of-range

Range

The range pseudo-classes apply to elements with range limitations.

An element without range limits or is not a form control is neither :in-range nor :out-of-range.

:in-range

The :in-range pseudo-class represents an element whose value is within its range.

:out-of-range

The :out-of-range pseudo-class represents an element whose value is outside of its range.

Browser Support (tested using latest versions)

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

Syntax

E:in-range { /* Style properties */ }

E:out-of-range { /* Style properties */ }

Example

/* In this example, all number type inputs that are within their range will have green backgrounds, otherwise, they will have red backgrounds. */

input[type="number"]:in-range {
background-color: green;
}

input[type="number"]:out-of-range {
background-color: red;
}

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.