Проверка числовых полей ввода с помощью CSS `:in-range` и `:out-of-range` от @WebTaverna /> js, css, html

Проверяем, правильно ли заполнено поле ввода с цифрами?

🔍

Решить эту задачу нам помогут псевдоклассы в CSS :in-range и :out-of-range, которые используются для стилизации полей ввода, поддерживающих атрибуты min и max

🔜

:in-range - введённое значение попадает в диапазон от min до max;

🔜

:out-of-range - не попадает в диапазон от min до max.

Пример

⤵️



    

        <input type="number" min="1" max="3">{}



    

        input:in-range {

  background-color: #17a992;

  border: 5px solid #006776;

}

input:out-of-range {

  background-color: #f4a898;

  border: 5px solid #e62a5a;

}{}

Атрибуты min и max могут иметь поля ввода с типами date, month, week, time, datetime-local, number и range, в которых эти атрибуты задают диапазон допустимых значений, которые пользователь может вводить в поле.

👍- если было полезно | ➡️ WebTaverna