UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
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
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 53 | 50 | No | 79 | 10.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 115 | 115 | 115 | 10.3 |
FYI: To test this (and the :in-range example) you need to enter an out of range value from the keyboard or by pasting. The browser will enforce the range when using the spinner control.
Nice to know, but I cannot think of any use-case for this. Can anyone?
I would rather limit users by
min&maxattributes or use a range slider.