CSS :in-range pseudo-class

Definition and usage

CSS :in-range The pseudo-class is used to match any element with a value within the range.

Note::in-range The pseudo-class is used for <input> elements that have min and/or max attributes.

Tip:Usage :out-of-range The pseudo-class selects all elements with values outside the specified range.

Example

Select and set the style of the input field only when the value of the field is within the range:

input:in-range {
  border: 2px solid green;
  background-color: beige;
}

Try it yourself

CSS Syntax

:in-range {
  css declarations;
}

Technical details

Browser support

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

Related pages

Reference:CSS :out-of-range pseudo-class