The in-range pseudo-class

The in-range pseudo-class sets a style for elements whose values ​​are set in a specified range. The range of values ​​must be specified with the min and max attributes.

Syntax

cssselector:in-range {

}

Example

Let's set a blue color for the background of the input, which contains numbers that fall in the range from 1 to 5. We will also set a pink background when the entered value does not fall within the selected range:

html<form>
  <p>Enter number from 1 to 5</p>
  <p>
    <input type="number" min="1" max="5" value="1">
  </p>
</form>

cssinput:in-range {
  background: #C2DDFD;
}
input:out-of-range {
  background: #E37D76;
}

Результат:

See also