CSS :out-of-range pseudo-class

Definition and usage

CSS :out-of-range The pseudo-class is used to match any element with a value that exceeds the given range limit.

Note::out-of-range The pseudo-class is used for elements with min and/or max attributes <input> element.

Tip:Usage :in-range The pseudo-class selects elements with all values within the specified range.

Example

Select and set the style of the input field only when the value of the field exceeds the range limit:

input:out-of-range {
  border: 2px solid red;
  background-color: pink;
}

Try it yourself

CSS syntax

:out-of-range {
  css declarations;
}

Technical details

Browser support

The numbers in the table indicate the first browser version that fully supports the pseudo-class.

Related pages

Reference:CSS :in-range pseudo-class