Le :in-rangepseudo-sélecteur dans CSS correspond aux éléments d'entrée lorsque leur valeur se situe dans la plage spécifiée comme étant acceptable. Il fait partie de la spécification CSS Selectors Level 4 qui est actuellement dans le brouillon de l'éditeur.
input:in-range ( border: 5px solid green; )Je pense que ce n'est pertinent que sur input(type=number). Les entrées de plage n'autorisent pas les valeurs en dehors de leur min / max et cela n'a pas beaucoup de sens sur tout autre type d'entrée. Peut-être des entrées text-y avec une longueur maximale, mais le comportement de celles-ci dans la plupart des navigateurs est d'empêcher de toute façon l'entrée au-delà du maximum.
Démo
Tout comme le code ci-dessus, cette entrée aura une bordure verte lorsque sa valeur est comprise entre 5 et 10.
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 53 | 50 | Non | 79 | 10.1 |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10,3 |
Propriétés connexes
Almanac le 1 juil.2020: hors de portée
input:out-of-range ( border: 5px solid red; ) 
Geoff Graham