Стиль элемента при верно введенных данных
Описание
Применяется к элементам форм, у которых введённое пользователем значение находится в заранее заданном диапазоне. Сам диапазон устанавливается с помощью атрибутов min и max, они, соответственно, задают минимальное и максимальное значение.
Синтаксис
Селектор:in-range { ... }Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#input-t:in-range {
background: #daff6a; /* Число в указанных пределах */
}
#input-t:out-of-range {
background: #fc6565; /* Неверное число */
}
</style>
<p>Введите число от 1 до 10</p>
<p><input type='number' id='input-t' min='1' max='10' value='1' /></p>
</body>
</html>Введите число от 1 до 10
Читайте также
Селекторы атрибутов со значениями в начале
Устанавливает стиль для элемента в том случае, если значение атрибута начинается с указанного тек...
Свойство border-bottom-right-radius
Устанавливает радиус скругления правого нижнего угла рамки.<br>Если рамка не задана, то скр...
Свойство grid-template
Сокращение для grid-template-rows, grid-template-columns и grid-template-areas.
Стиль первого символа в тексте
Псевдоэлемент ::first-letter определяет стиль первого символа в тексте элемента, к которому добав...
Свойство background-origin
Определяет область позиционирования фонового рисунка. Оно не применяется, при background-attachme...