Range :in-range / :out-of-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

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

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.