The out-of-range pseudo-class

The out-of-range pseudo-class defines a style for elements whose values ​​fall outside the specified range. The range of values ​​must be specified by the min and max attributes.

Syntax

cssselector:out-of-range {
  
}

Example

Let's set blue color for the input background, 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 limit:

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