CSS :in-range Selector

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

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

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 input elements with min and/or max attributes!

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

Version:	CSS3

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

Selector
:in-range	53.0	13.0*	50.0	10.1	40.0

*In Edge, the :in-range property also incorrectly selects input elements without min/max attributes.

:in-range {
css declarations;
} Demo