Нужно визуально показать, что введённое значение допустимо?

Псевдоклассы :in-range и :out-of-range в CSS позволяют стилизовать поля формы в зависимости от того, попадает ли введённое значение в заданный диапазон. Они работают с элементами, у которых указаны min и max.

Как используется:

• :in-range — значение корректное и находится в пределах диапазона;

• :out-of-range — значение выходит за допустимые границы;

• можно подсвечивать поля, менять рамку или фон без JavaScript.

Если атрибуты min и max не заданы, то при пустом поле сработает :in-range, а при введённом значении ни один из псевдоклассов не сработает.

Code Ready | #свойство