La pseudo-clase :in-range de CSS representa un elemento <input> cuyo valor actual se encuentra dentro de los límites de rango especificados por los atributos min y max.
/* Selecciona cualquier <input>, pero solo cuando tiene un rango
especificado, y su valor está dentro de ese rango */
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
}
Esta pseudo-clase es útil para dar al usuario una indicación visual de que el valor actual de un campo está dentro de los límites permitidos.
Sintaxis
:in-range
Ejemplo
HTML
<form action="" id="form1">
<ul>Los valores entre 1 y 10 son válidos.
<li>
<input id="value1" name="value1" type="number" placeholder="1 a 10" min="1" max="10" value="12">
<label for="value1">Tu valor esta </label>
</li>
</ul>
</form>
CSS
li {
list-style: none;
margin-bottom: 1em;
}
input {
border: 1px solid black;
}
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
background-color: rgba(255, 0, 0, 0.25);
border: 2px solid red;
}
input:in-range + label::after {
content: 'bien.';
}
input:out-of-range + label::after {
content: 'fuera de rango!';
}
Resultado
Especificaciones
| Especificación | Estado | Comentarios |
|---|---|---|
| HTML Living Standard La definición de ':in-range' en esta especificación. |
Living Standard | Define cuándo :in-range coincide con elementos en HTML. |
| Selectors Level 4 La definición de ':in-range' en esta especificación. |
Working Draft | Definición Inicial. |
Compatibilidad con navegadores
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Soporte básico | 102 | Si | 293 | No | 114 | Si5 |
| Feature | Android webview | Chrome para Android | Edge mobile | Firefox para Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Soporte básico | 2.31 | ? | Si | 16 | Si4 | Si5 | ? |
1. Before version 52, :in-range matched disabled and read-only inputs (see Chromium bug 602568). In version 52, it was changed to only match enabled read-write inputs.
2. Before Chrome 52, :in-range matched disabled and read-only inputs (see Chromium bug 602568). In Chrome 52, it was changed to only match enabled read-write inputs.
3. Before Firefox 50, :in-range matched disabled and read-only inputs (see bug 1264157). In Firefox 50, it was changed to only match enabled read-write inputs.
4. Before Opera 39, :in-range matched disabled and read-only inputs (see Chromium bug 602568). In Opera 39, it was changed to only match enabled read-write inputs.
5. In Safari, :in-range matched disabled and read-only inputs (see bug 156530). It was later changed to only match enabled read-write inputs.