CSS псевдокласс :in-range
Псевдокласс :in-range выбирает элементы, значение которых находится в пределах min и max. Примеры и практика.
Псевдокласс CSS :in-range соответствует элементу <input>, текущее значение которого находится внутри диапазона, заданного атрибутами min и max. Он позволяет стилизовать поле по-другому, пока ввод пользователя остаётся допустимым, обеспечивая мгновенную визуальную обратную связь без единой строки JavaScript.
На этой странице рассматривается, когда применяется :in-range, с какими типами полей ввода он работает, практические примеры стилизации и его взаимосвязь с псевдоклассами валидации.
Когда применяется селектор
:in-range актуален только для элементов формы, способных выражать диапазон. Элемент управления считается ограниченным диапазоном, если он принимает ограничения min и/или max. Если у элемента нет таких ограничений, он не может находиться ни «в диапазоне», ни вне диапазона — поэтому ни один из псевдоклассов к нему не применится.
:in-range работает с элементами <input>, поддерживающими min/max: type="number", type="range", type="date", type="month", type="week", type="time" и type="datetime-local". Текстовое поле, чекбокс или кнопка никогда не находятся в диапазоне.
Поле считается в диапазоне, если выполнены все три условия:
- тип поля ввода поддерживает
min/max, - задан хотя бы один из атрибутов
minилиmax, - текущее значение находится между граничными значениями (включительно).
Как только значение выходит за границу, оно перестаёт соответствовать :in-range и начинает соответствовать :out-of-range. Эти два псевдокласса взаимно исключают друг друга, поэтому идеально подходят для оформления в стиле «хорошо/плохо».
Синтаксис
:in-range {
/* style declarations */
}На практике его почти всегда квалифицируют с input (или более конкретным селектором), чтобы затрагивать только нужные элементы управления:
input:in-range {
border-color: green;
}Стилизация поля ввода в диапазоне
В приведённом ниже примере числовое поле выделяется рамкой, пока его значение остаётся в пределах 1–10. Попробуйте изменить значение на 0 или 15 в редакторе: стиль рамки исчезнет, поскольку поле больше не находится в диапазоне.
<!DOCTYPE html>
<html>
<head>
<title>:in-range example</title>
<style>
input:in-range {
border: 2px solid #666;
}
</style>
</head>
<body>
<h2>:in-range selector example</h2>
<form>
<input type="number" min="1" max="10" value="5" />
</form>
</body>
</html>Совместное использование in-range и out-of-range
Поскольку эти два состояния никогда не пересекаются, распространённый приём — стилизовать оба сразу: зелёный цвет при допустимом значении и красный, как только значение выходит за пределы допустимого диапазона.
<!DOCTYPE html>
<html>
<head>
<title>:in-range and :out-of-range</title>
<style>
input:in-range {
border: 2px solid green;
}
input:out-of-range {
border: 2px solid red;
}
</style>
</head>
<body>
<label>Quantity (1–10):</label>
<input type="number" min="1" max="10" value="5" />
</body>
</html>Комбинирование с другими псевдоклассами
:in-range можно объединять с другими псевдоклассами — например, :hover или :focus — для более тонкой настройки обратной связи:
input:in-range:focus {
outline: 2px solid green;
}Примечания и подводные камни
:in-rangeотражает текущее значение, поэтому стиль обновляется в реальном времени по мере набора текста или перемещения ползунка.- Пустое поле с атрибутами
min/maxсчитается находящимся в диапазоне (нет значения, которое нарушало бы ограничение), поэтому комбинируйте его с:required, если пустое значение должно считаться недопустимым. minиmaxздесь влияют только на стилизацию — они по-прежнему применяются встроенными псевдоклассами валидации, такими как:validи:invalid, при отправке формы.