:in-rangeSelektor pseudo CSS pasuje do elementów wejściowych, gdy ich wartość zawiera się w zakresie określonym jako do przyjęcia. Jest to część specyfikacji selektorów CSS poziomu 4, która jest obecnie w wersji roboczej redakcji.
input:in-range ( border: 5px solid green; )Uważam, że ma to znaczenie tylko w input(type=number). Wejścia zakresu nie pozwalają na wartości poza ich min / max i nie ma to większego sensu na żadnym innym typie wejścia. Być może dane wejściowe text-y z maksymalną długością, ale zachowanie w większości przeglądarek polega na zapobieganiu przekroczeniu maksymalnej długości.
Próbny
Podobnie jak w powyższym kodzie, to wejście będzie miało zieloną ramkę, gdy jego wartość mieści się w zakresie od 5 do 10.
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 53 | 50 | Nie | 79 | 10.1 |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Powiązane właściwości
Almanach w dniu 1 lipca 2020 r:poza zakresem
input:out-of-range ( border: 5px solid red; ) 
Geoff Graham