:out-of-range

Avatar of Sara Cope
Sara Cope on (Updated on )

Take your JavaScript to the next level at Frontend Masters.

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

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

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 max length, but the behavior on those in most browsers is to prevent entry past the max anyway.

The selector is defined in the Selectors Level 4 specification, alongside its counterpart, :in-range.

Demo

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

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
5350No7910.1

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
94929410.3

Related properties