CSS Reference Pseudo-class


:out-of-range is a CSS pseudo-class used to style elements that have range limitations when the value that the element bound to is outside the specified range limits.

In other words, it matches an element when the value of its value attribute is outside the range limitations specified on it.

Any other element that does not have data range limitations or that is not a form control element can not be selected with :out-of-range.

Examples of elements with range limitations are sliders and inputs that accept a number as a value. For example:

<input type="number">

Such an input would have a range of acceptable values specified using the min and max attributes. The value attribute would hold the current value of the input.

<input type="number" min="1" max="10" value="8">

In this example, if the value exceeds the range limitations, the input will match the :out-of-range selector. The following will style the input when its value it outside the range limit:

input[type="number"]:out-of-range {
    /* styles here */

An element whose value is within the specified range can be selected and styled using the :in-range pseudo-class selector.

Trivia & Notes

Just like other pseudo-class selectors, the :out-of-range selector can be chained with other selectors such as :focus, for example, to provide focus styles for the element when its value is outside the allowed range limit. For example:

input:out-of-range:focus {
    border: 2px solid tomato;


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

Live Demo

The following example uses the :out-of-range and :in-range pseudo-class selectors to style the input when the value provided is within or outside the specified range. Try typing in a value that is outside the specified range to see the input’s styles change.

View this demo on the Codrops Playground

Browser Support

The :out-of-range pseudo-class selector is supported in Chrome 10+, Firefox, 28+. Safari, Opera 11+, and on Android and iOS. It is not supported in Internet Explorer.

Written by

Last updated February 3, 2015 at 12:33 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.