CSS :in-range pseudo-class

The :in-range pseudo-class targets elements that use a range and that the values are within the defined range.

In the input below, the range is between 5 and 10: Values inside this range create a green border.

Type 555 and border color turns red. Type 8 and border color turns green.

Press TAB if border color doesn't change when typing.

CSS :out-of-range pseudo-class

The :out-of-range pseudo-class targets elements that use a range and that the values fall outside the defined range.

In the input below, the range is between 5 and 10: Values outside this range create a red border.

Type 555 and border color turns red. Type 8 and border color turns green.

Press TAB if border color doesn't change when typing.