Руководство по CSS

Правила CSS (@RULES)

Полный список свойств CSS

Функции CSS Полное руководство по селекторам CSS

CSS :out-of-range выборщик

:out-of-range CSS 伪类表示一个<input>元素，其当前值处于属性 min 和 max 限定的范围外。注意：该伪类仅适用于那些拥有（或可以接受）取值范围设定的元素。若缺少此类设定，元素值就无所谓“in-range”和“out-range”。

Полное руководство по CSS-селекторам

Онлайн пример

Установите указанный стиль, когда значение ввода выходит за пределы указанного интервала:

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Основной учебник (oldtoolbag.com)</title>　
<style>
input:out-of-range
{
　　　　border:2px solid blue;
}
</style>
</head>
<body>
<h3>Пример использования селектора :out-of-range.</h3>
<input type="number" min="8" max="18" value="20" />
<p>Введите значение в input (меньше 8 или больше 18), чтобы увидеть изменения стиля.</p>
</body>
</html>

Проверьте, <</>>

Определение и использование

Выборщик :out-of-range используется для отображения стиля, когда значение тега выходит за пределы указанного интервала.

Внимание: 　Выборщик :out-of-range действует только на элементы, которые могут определить значения за пределами указанного интервала, например, атрибуты min и max элемента input.

Совместимость с браузерами

Числа в таблице указывают на первую версию браузера, поддерживающую этот свойство.

Выборщик
:out-of-range	10.0	Не поддерживается	28.0	5.2	11.0

Грамматика CSS

/* Этот псевдокласс может选定 любое <input>, но будет эффективен только если элемент указал диапазон значений и текущее значение элемента находится в указанном диапазоне */
input:out-of-range {
　　background-color: rgba(255, 0, 0, 0.25);
}

Этот псевдокласс предоставляет пользователю визуальное указание того, что текущее значение поля ввода выходит за пределы разрешенного диапазона.

Связанные страницы

CSS селекторы :in-range

Полное руководство по CSS-селекторам

Функции CSS Полное руководство по селекторам CSS