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.
Nota: Esta pseudo-clase solo se aplica a los elementos que tienen (y pueden tomar) una limitación de rango. En ausencia de tal limitación, el elemento no puede estar "dentro del rango" ni "fuera de rango".
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
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.