MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

:out-of-range

 

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:'вне диапозона!';
}
 

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

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

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

Возможность 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,