:out-of-range

Псевдокласс :out-of-range CSS псевдокласса обозначает элемент <input>, текущее значение которого выходит за пределы диапазона, заданного атрибутами min и max.

Попробуйте

Этот псевдокласс полезен для визуального указания пользователю, что текущее значение поля находится вне допустимых пределов.

Примечание: Этот псевдокласс применяется только к элементам, которые имеют (и могут принимать) ограничение диапазона. При отсутствии такого ограничения элемент не может быть ни «в пределах диапазона», ни «вне диапазона».

Синтаксис

:out-of-range {
  /* ... */
}

Примеры

HTML

<form action="" id="form1">
  <p>Values between 1 and 10 are valid.</p>
  <ul>
    <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>
  </ul>
</form>

CSS

li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgb(0 255 0 / 25%);
}

input:out-of-range {
  background-color: rgb(255 0 0 / 25%);
  border: 2px solid red;
}

input:in-range + label::after {
  content: "okay.";
}

input:out-of-range + label::after {
  content: "out of range!";
}

Результат

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

Спецификация
Стандарт HTML # selector-out-of-range
Уровень 4 селекторов # out-of-range-pseudo

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в iOS	Samsung Internet	WebView Android
`:out-of-range`	10	13	29	11	5.1	18	16	11	5	1.0	2.2

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range