Псевдоклассы :in-range и :out-of-range

Псевдоклассы :in-range и :out-of-range применяются для добавления стиля элементам, которые предлагают выбор между минимальным и максимальным значением.

Применить и определить

Псевдоклассы :in-range и :out-of-range могут быть использованы для типов number, datetime, datetime-local, month, week или для любых других типов вводимых данных с интервалом.

HTML

В поле ввода минимальное указанное число должно быть от 1-го до 20-ти. Как только будет выбрано допустимое число, вокруг поля контур сменится с красного на зеленый.

<input type="number" min="1" max="20" value="0">

CSS

Псевдоклассы :in-range и :out-of-range будут работать только для элементов, которые способны предложить интервал для выбора. Псевдоклассы :read-only и :read-write являются селекторами четвёртого уровня CSS4.

input[type=number]:in-range {
  outline: green solid 1px;
}

input[type=number]:out-of-range {
  outline: red solid 1px;
}

Поддержка

Еще псевдоклассы CSS4