Стили поля с неверными значениями, выходящими из заданного диапазона

Описание

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

Синтаксис

Селектор:out-of-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>
#inp:out-of-range {
background: #ff4545;
}
#label1 {
height: 1em;
}
#inp:out-of-range + #label1::after {
content: 'Неверное число';
color: #ba0000;
margin-left: 0.5em;
}
</style>
<p>Введите число от 1 до 10</p>
<p>
<input id='inp' type='number' id='dec' min='1' max='10' value='1' />
<label id='label1' for='dec'></label>
</p>
</body>
</html>

Читайте также

Правило @import

Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. @import не разрешается вставлять после любых объявлений кроме...

Обращение к самому главному родительскому элементу

Псевдокласс :root определяет корневой элемент документа.

В HTML этот селектор всегда соответствует элементу html, но в стилях приоритет :root в...

Свойство text-shadow

Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство text-shadow может ра...

Универсальный селектор

Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае помож...