The :out-of-range pseudo selector in CSS matches input elements when their value is outside the range specified as being acceptable.
<input type="number" min="5" max="10">
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 maxlength, but the behavior on those in most browsers is to prevent entry past the max anyway.
More Info
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5.2+ | 19- | 11+ | 10- | 2.3+ | 4+ |

Share
Tweet
Email
Leave a Reply