Skip to main content
Home / CSS Almanac / Selectors / I / :in-range

:in-range

The :in-range pseudo selector in CSS matches input elements when their value is within the range specified as being acceptable.

<input type="number" min="5" max="10">
input:in-range {
  border: 5px solid green;
}

I believe it's only relevant on input[type=number]. Range inputs don't allow values outside their min/max and it doesn't make much sense on any other type of input. Perhaps text-y inputs with a maxlength, but the behavior on those in most browsers is to prevent entry past the max anyway.

Demo

Just like the code above, this input will have a green border when its value is between 5 and 10.

More Info

Browser Support

Chrome Safari Firefox Opera IE Android iOS
10+ 5.2+ 19- 11+ 10- 2.3+ 4+
icon-link icon-logo-star icon-search icon-star