El :in-rangepseudo selector en CSS coincide con los elementos de entrada cuando su valor está dentro del rango especificado como aceptable. Es parte de la especificación CSS Selectors Level 4 que se encuentra actualmente en el Borrador del Editor.
input:in-range ( border: 5px solid green; )Creo que solo es relevante en input(type=number). Las entradas de rango no permiten valores fuera de su mínimo / máximo y no tiene mucho sentido en ningún otro tipo de entrada. Quizás entradas text-y con una longitud máxima, pero el comportamiento en la mayoría de los navegadores es evitar la entrada más allá del máximo de todos modos.
Manifestación
Al igual que el código anterior, esta entrada tendrá un borde verde cuando su valor esté entre 5 y 10.
Soporte de navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 53 | 50 | No | 79 | 10.1 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10,3 |
Propiedades relacionadas
Almanaque el 1 de julio de 2020:fuera de rango
input:out-of-range ( border: 5px solid red; ) 
Geoff Graham