English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
in-range CSS псевдокласс представляет input элемент, текущее значение которого находится в диапазоне, определенном свойствами min и max. Замечание: этот псевдокласс действует только на элементы, которые имеют (или могут принимать) установленный диапазон значений. Если такой диапазон не задан, значение элемента не имеет значения в отношении "in-range" и "out-of-range".
Полное руководство по CSS селекторам
Установите указанный стиль, когда значение ввода находится в заданном диапазоне:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основной курс (oldtoolbag.com)</title>
<style>
input:in-range
{
border:2px solid orange;
}
</style>
</head>
<body>
<h3>Пример :in-range селектора.</h3>
<input type="number" min="8" max="18" value="9" />
<p>Введите значение в поле input (меньше 8 или больше 18), чтобы увидеть изменения стиля.</p>
</body>
</html>Проверьте, <</>>:in-range селекторы используются для стилей, отображаемых при значении элемента в указанном диапазоне.
Внимание: :in-range селекторы действуют только на элементы, которые могут определить интервал значений, например, элементы input с атрибутами min и max.
Числа в таблице показывают версию первого браузера, поддерживающего этот свойство.
| Выборщик | |||||
|---|---|---|---|---|---|
| :in-range | 10.0 | Не поддерживается | 28.0 | 5.2 | 11.0 |
/* Этот псевдокласс может选定 любое <input>, но будет работать только в том случае, если элемент имеет указанный диапазон значений и текущее значение элемента находится в этом диапазоне */
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
}Этот псевдокласс используется для предоставления пользователю визуального подсказки, указывающей, что текущее значение поля ввода находится в разрешенном диапазоне.
CSS селекторы :out-of-range