skip to main content

:in-range, :out-of-range

css

Кратко 🔗

Эти псевдоклассы используются для стилизации полей ввода, которые поддерживают атрибуты min и max:

  • :in-range для полей, в которых введённое значение попадает внутрь диапазона от min до max;
  • :out-of-range для полей, в которых введённое значение не попадает внутрь диапазона от min до max.

Пример 🔗

<input class="with-range" type="number" min="10" max="20" step="1">
.with-range {
border: 1px solid black;
}

.with-range:in-range {
border-color: green;
background-color: #00FF0033;
}

.with-range:out-of-range {
border-color: red;
background-color:#FF000033;
}

See the Pen :in-range / :out-of-range 1 by Denis Ezhkov (@ezhkov) on CodePen.

Как это понять 🔗

Поля ввода с типами date, month, week, time, datetime-local, number и range могут иметь атрибуты min и max. Эти атрибуты задают диапазон допустимых значений, которые пользователь может вводить в поле. В зависимости от того, попадает ли введённое значение в диапазон, будут применяться стили для псевдоклассов :in-range и :out-of-range.

Как пишется 🔗

input:in-range + span {
color: #00000033;
}

input:out-of-range + span {
color: #ff000033;
}

Подсказки 🔗

💡 Если в поле не введено никакого значения, то срабатывает псевдокласс :in-range.

💡 Если атрибуты min и max не заданы, то при пустом поле сработает :in-range, а при введённом значении ни один из псевдоклассов не сработает.

💡 Если нужно, чтобы при пустом поле не срабатывал :in-range, можно расширить селектор псевдоклассом :placeholder-shown и задать плейсхолдер полю ввода:

See the Pen :in-range / :out-of-range 2 by Denis Ezhkov (@ezhkov) on CodePen.

В работе 🔗

🛠 Псевдоклассы :in-range и :out-of-range можно использовать в более сложных селекторах, чтобы, например, показать ошибку ввода:

See the Pen :in-range / :out-of-range by Denis Ezhkov (@ezhkov) on CodePen.