Псевдокласс :in-range

Обновлено: 26.05.2022

Псевдокласс :in-range

Применяется к элементам форм, у которых введённое пользователем значение находится в заранее заданном диапазоне. Сам диапазон устанавливается с помощью атрибутов min и max, они, соответственно, задают минимальное и максимальное значение.

Синтаксис

<i>Селектор</i>:in-range { ... }

Пример

В данном примере при вводе числа от 1 до 10 у поля становится зелёный цвет фона, как только пишется буква или число больше 10, то цвет фона меняется на розовый.

Браузеры

:in-range

Посмотреть совместимость на Can I use?

:in-range