De :in-rangepseudo-selector in CSS komt overeen met invoerelementen als hun waarde binnen het bereik ligt dat is opgegeven als acceptabel. Het maakt deel uit van de CSS Selectors Level 4-specificatie die momenteel in Editor's Draft staat.
input:in-range ( border: 5px solid green; )Ik geloof dat het alleen relevant is op input(type=number). Bereikinputs staan geen waarden buiten hun min / max toe en het heeft niet veel zin voor andere soorten input. Misschien tekst-y-invoer met een maxlength, maar het gedrag van die in de meeste browsers is om toch te voorkomen dat invoer voorbij de max.
Demo
Net als de bovenstaande code, heeft deze invoer een groene rand wanneer de waarde tussen 5 en 10 ligt.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 53 | 50 | Nee | 79 | 10.1 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Gerelateerde eigenschappen
Almanac op 1 juli 2020:buiten bereik
input:out-of-range ( border: 5px solid red; ) 
Geoff Graham