We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

 

Summary

CSS псевдокласс :out-of-range находит элементы, значение которых находится вне диапозона их ограничений. Он позволяет странице показывать, когда значение элемента находится вне допустимого диапозонеа. Значение будет вне диапозона, если оно меньше или больше, чем минимальное и максимальное значения.

Замечание: этот псевдокласс применяется только к элементам с заданным диапозоном ограничений. При отсутствии такого ограничения, элемент не может быть ни "в зоне допустимых значений", ни "вне диапазона".

Пример

HTML

<form action="" id="form1">
    <ul>Приминаются значения между 1 и 10.
        <li>
            <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
            <label for="value1">Your value is </label>
        </li>
</form>

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:' НОРМАЛЬНОЕ';
}
input:out-of-range + label::after {
    content:'вне диапозона!';
}
 

Спецификации

Спецификация Статус Комментарий
HTML Living Standard
Определение ':out-of-range' в этой спецификации.
Живой стандарт Определяет, когда :out-of-range находит элементы в HTML.
Selectors Level 4
Определение ':out-of-range' в этой спецификации.
Рабочий черновик Изначальное определение.

Поддержка браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Поддержка <input> 10.0 29.0 (29.0) Нет 11.0 5.2
Возможность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Поддержка <input> 2.3 16.0 (16.0) Нет (Да) (Да)

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: BychekRU
Обновлялась последний раз: BychekRU,