CSS3 :in-range Selector


Example

Select and style only if the value of the <input> element is "in range":

input:in-range {
    border: 2px solid yellow;
}

Try it yourself »

Definition and Usage

The :in-range selector selects all elements with a value that is within a specified range.

Note: The :in-range selector only works for elements with range limitations, such as input elements with min and max attributes.

Tip: Use the :out-of-range selector to select all elements with a value that is outside a specified range.

Version: CSS3


Browser Support

The numbers in the table specifies the first browser version that fully supports the selector.

Selector
:in-range 10.0 Not supported 28.0 5.2 11.0


CSS Syntax

:in-range {
    css declarations;
} Demo


Related Pages

CSS Selector :out-of-range



Color Picker

colorpicker