Lo :in-rangepseudo selettore in CSS corrisponde agli elementi di input quando il loro valore è compreso nell'intervallo specificato come accettabile. Fa parte della specifica CSS Selectors Level 4 che è attualmente in Editor's Draft.
input:in-range ( border: 5px solid green; )Credo sia rilevante solo su input(type=number). Gli input di intervallo non consentono valori al di fuori del loro minimo / massimo e non ha molto senso su nessun altro tipo di input. Forse input di testo con una lunghezza massima, ma il comportamento su quelli nella maggior parte dei browser è di impedire comunque l'ingresso oltre il massimo.
Demo
Proprio come il codice sopra, questo input avrà un bordo verde quando il suo valore è compreso tra 5 e 10.
Supporto del browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 53 | 50 | No | 79 | 10.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Proprietà correlate
Almanac il 1 ° luglio 2020:fuori dal limite
input:out-of-range ( border: 5px solid red; ) 
Geoff Graham