CSS Reference Pseudo-class

:in-range

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

In other words, it matches an element when the value of its value attribute is within 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 :in-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, as long as the value is between 1 and 10, the input will match the :in-range selector and can be styled. The following will style the input while its value is within the range limit:

input[type="number"]:in-range {
    /* styles here */
}
                

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

Trivia & Notes

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

input:in-range:hover {
    cursor: help;
}
                

Examples

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

Live Demo

The following example uses the :in-range and :out-of-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 :in-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 Manoela Ilic.

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