:in-range

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

Попробуйте

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

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

Синтаксис

:in-range {
  /* ... */
}

Примеры

HTML

<form action="" id="form1">
  <ul>
    Values between 1 and 10 are valid.
    <li>
      <input
        id="value1"
        name="value1"
        type="number"
        placeholder="1 to 10"
        min="1"
        max="10"
        value="12"
        required />
      <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!";
}

Результат

Примечание: Пустой <input> не считается выходящим за пределы диапазона и не будет выбран с помощью селектора псевдокласса :out-of-range. Псевдокласс :blank предназначен для выбора пустых полей ввода, хотя на момент написания этой документации он является экспериментальным и не поддерживается должным образом. Также можно использовать атрибут required и псевдокласс :invalid для предоставления более общей логики и стилей для обозначения обязательных полей ввода (:invalid будет применять стили к пустым и выходящим за пределы диапазона полям ввода).

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`:in-range`	10 До Chrome 52, `:in-range` соответствовал отключенным и только для чтения полям ввода (см. баг 41248615). В Chrome 52 это было изменено, чтобы соответствовать только активным полям ввода, доступным для редактирования.	13	29 До Firefox 50, `:in-range` соответствовал отключенным и только для чтения полям ввода (см. баг 1264157). В Firefox 50 это было изменено, чтобы соответствовать только активным полям ввода, доступным для редактирования.	11 До Opera 39, `:in-range` соответствовал отключенным и только для чтения полям ввода (см. баг 41248615). В Opera 39 это было изменено, чтобы соответствовать только активным полям ввода, доступным для редактирования.	5.1 В Safari, `:in-range` соответствовал отключенным и только для чтения полям ввода (см. баг 156530). Позже это было изменено, чтобы соответствовать только активным полям ввода, доступным для редактирования.	18 До Chrome 52, `:in-range` соответствовал отключенным и только для чтения полям ввода (см. баг 41248615). В Chrome 52 это было изменено, чтобы соответствовать только активным полям ввода, доступным для редактирования.	16	11 До Opera 39, `:in-range` соответствовал отключенным и только для чтения полям ввода (см. баг 41248615). В Opera 39 это было изменено, чтобы соответствовать только активным полям ввода, доступным для редактирования.	5 В Safari, `:in-range` соответствовал отключенным и только для чтения полям ввода (см. баг 156530). Позже это было изменено, чтобы соответствовать только активным полям ввода, доступным для редактирования.	1.0 До версии 6.0, `:in-range` соответствовал отключенным и только для чтения полям ввода (см. баг 41248615). В версии 6.0 это было изменено, чтобы соответствовать только активным полям ввода, доступным для редактирования.	2.2 До версии 52, `:in-range` соответствовал отключенным и только для чтения полям ввода (см. баг 41248615). В версии 52 это было изменено, чтобы соответствовать только активным полям ввода, доступным для редактирования.

См. также

© 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/:in-range