DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!
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
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 |
|---|---|---|---|
| 127 | 127 | 127 | 10.3 |
You can always value by hand, then it’s useful :)
Look like it works on Android Firefox too!
Never knew that something like this existed.
I’m thankful for find this. Very interesting.
In the exemple (With FireFox):
10.0000000000000008881784197001252323389053344726…
is still in-range (Green)
but not
10.00000000000000088817841970012523233890533447266…
So what is really this “max value” ?
You can always add (on any numbers): 0.0000000000000008881784197001252323389053344726… to still “in-range”.