CSS псевдокласс :out-of-range
Псевдокласс :out-of-range выбирает элементы со значением вне диапазона, заданного атрибутами min и max. Примеры.
Псевдокласс CSS :out-of-range соответствует полю ввода формы, текущее значение которого находится вне допустимого диапазона, заданного атрибутами min и/или max. Он позволяет мгновенно показывать пользователю визуальную обратную связь — красную рамку, предупреждающий цвет, подсказку — в тот момент, когда введённое число слишком мало или слишком велико, без какого-либо JavaScript.
На этой странице описано, к каким элементам применяется :out-of-range, чем он отличается от :in-range и :invalid, и приведены рабочие примеры, которые можно скопировать.
:out-of-range соответствует только элементам <input>, у которых есть атрибут min и/или max и которые поддерживают ограничения диапазона, — то есть type="number", type="range" и типы даты/времени (date, month, week, time, datetime-local). Для любого другого поля ввода этот псевдокласс никогда не совпадает.
Когда псевдокласс совпадает
Поле ввода считается «вне диапазона», если выполняются все следующие условия:
- У него есть атрибут
minи/илиmax. - В нём в данный момент содержится значение, которое браузер может разобрать.
- Это значение меньше
minили большеmax.
Несколько важных следствий:
- Пустые поля никогда не совпадают. При отсутствии значения сравнивать не с чем, поэтому
:out-of-rangeравенfalse(и:in-rangeтоже равенfalse). - Псевдокласс касается исключительно числового/датового диапазона. Несоответствие
step(например,1.5приstep="1") делает поле:invalid, но не делает его:out-of-range. - Псевдокласс обновляется в реальном времени по мере редактирования поля пользователем, поэтому стили переключаются мгновенно.
Версия
Синтаксис
:out-of-range {
/* css declarations */
}Для наглядности его почти всегда сочетают с типом поля ввода:
input:out-of-range {
border: 3px solid #d9534f;
}Пример селектора :out-of-range
Поле ниже принимает месяцы от 1 до 12, но начальное значение равно 15, поэтому рамка выделена при загрузке. Измените значение на число от 1 до 12 — и выделение исчезнет.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:out-of-range {
border: 3px solid #8ebf42;
}
</style>
</head>
<body>
<h2>:out-of-range selector example</h2>
<form>
<input type="number" min="1" max="12" value="15" />
</form>
</body>
</html>Совместное использование :out-of-range и :in-range
:out-of-range и :in-range — противоположности: не более одного из них совпадает одновременно, и ни один не совпадает с пустым полем. Стилизация обоих даёт полноценный интерфейс «допустимое/недопустимое значение»:
<!DOCTYPE html>
<html>
<head>
<title>In-range and out-of-range</title>
<style>
input:in-range {
border: 2px solid #2e8b57;
}
input:out-of-range {
border: 2px solid #d9534f;
background-color: #fde9e9;
}
</style>
</head>
<body>
<label>Pick a quantity (1–10):</label>
<input type="number" min="1" max="10" value="25" />
</body>
</html>:out-of-range и :invalid
Эти два псевдокласса часто путают. :invalid — более широкое правило: оно совпадает с любым нарушением ограничений, включая отсутствующее значение required, некорректный email или несоответствие step. :out-of-range — уже: он срабатывает только тогда, когда значение меньше min или больше max.
Значение, выходящее за пределы диапазона, также является недопустимым, поэтому :invalid тоже будет ему соответствовать. Используйте :out-of-range, когда хотите сообщить пользователю именно «это число слишком большое/маленькое», а не выдать общую ошибку. Смотрите :invalid и :valid для более широких псевдоклассов валидации.
:out-of-range стилизует поле, но не останавливает отправку формы самостоятельно. Сочетайте его со встроенной валидацией (браузер блокирует отправку значения вне диапазона при наличии атрибутов min/max) или с проверками на стороне сервера. Никогда не полагайтесь на CSS как единственную гарантию целостности данных.
Связанные псевдоклассы
:in-range— противоположность данного селектора.:validи:invalid— соответствуют общей валидности элемента управления формы.:requiredи:optional— соответствуют по атрибутуrequired.