Den :in-rangepseudo väljaren i CSS matchar inmatningselement när deras värde ligger inom det område som specificeras såsom varande acceptabelt. Det är en del av CSS Selectors nivå 4-specifikationen som för närvarande finns i Editor's Draft.
input:in-range ( border: 5px solid green; )Jag tror att det bara är relevant den input(type=number). Räckviddsingångar tillåter inte värden utanför min / max och det är inte meningsfullt på någon annan typ av ingång. Kanske text-y-ingångar med en maxlängd, men beteendet hos de i de flesta webbläsare är att förhindra inmatning förbi max ändå.
Demo
Precis som koden ovan kommer denna inmatning att ha en grön ram när dess värde är mellan 5 och 10.
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 53 | 50 | Nej | 79 | 10.1 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Relaterade egenskaper
Almanack den 1 juli 2020:utom räckhåll
input:out-of-range ( border: 5px solid red; ) 
Geoff Graham