:in-range¶
Псевдокласс :in-range представляет собой элемент <input>, текущее значение которого находится в пределах диапазона, заданных атрибутами min и max.
Этот псевдокласс полезен для предоставления пользователю визуальной информации о том, что текущее значение поля находится в допустимых пределах.
Примечание. Этот псевдокласс применяется только к элементам, которые могут принимать ограничение диапазона. В отсутствие такого ограничения элемент не может быть «в диапазоне» или «вне диапазона».
Синтаксис¶
/* Selects any <input>, but only when it has a range
specified, and its value is inside that range */
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
}
Спецификации¶
Описание и примеры¶
```html tab="HTML"
```css tab="CSS"
li {
list-style: none;
margin-bottom: 1em;
}
input {
border: 1px solid black;
}
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
background-color: rgba(255, 0, 0, 0.25);
border: 2px solid red;
}
input:in-range + label::after {
content: 'okay.';
}
input:out-of-range + label::after {
content: 'out of range!';
}
Результат
