Описание

CSS псевдокласс :in-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">Ваше значение </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
Определение ':in-range' в этой спецификации.
Живой стандарт Определяет, когда :in-range находит элементы вHTML.
Selectors Level 4
Определение ':in-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,