:in-range

The :in-range pseudo selector in CSS matches input elements when their value is within the range specified as being acceptable. It is part of the CSS Selectors Level 4 specification which is currently in Editor’s Draft.

<input max="10" min="5" type="number">

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.

Browser support

Related properties

Almanac on Apr 12, 2021

:out-of-range

input:out-of-range { border: 5px solid red; }

Sara Cope

Almanac on Jan 7, 2021

::placeholder

input::placeholder { color: red; }

Chris Coyier

Almanac on May 22, 2020

:placeholder-shown

input:placeholder-shown { border: 5px solid red; }

Geoff Graham

Almanac on Dec 1, 2021

:user-invalid

input:user-invalid { color: red; }

Geoff Graham