CSS :in-range Pseudo Clase
La pseudo-clase CSS :in-range selecciona elementos con un valor dentro del rango definido por los atributos min y max. Ejemplos prácticos incluidos.
La pseudo-clase CSS :in-range coincide con un elemento <input> cuyo valor actual está dentro del rango definido por sus atributos min y max. Te permite aplicar estilos distintos a un campo mientras la entrada del usuario sigue siendo válida, ofreciendo retroalimentación visual instantánea sin necesidad de una sola línea de JavaScript.
Esta página explica cuándo se aplica :in-range, los tipos de entrada con los que funciona, ejemplos prácticos de estilos y su relación con las pseudo-clases de validación con las que se combina.
Cuándo aplica el selector
:in-range solo importa para los controles de formulario que pueden expresar un rango. Un control tiene límite de rango cuando acepta una restricción min y/o max. Si un control no tiene dicha restricción, no puede estar "dentro del rango" ni fuera de rango — por lo que ninguna de las dos pseudo-clases coincidirá con él.
:in-range funciona en elementos <input> que admiten min/max: type="number", type="range", type="date", type="month", type="week", type="time" y type="datetime-local". Un input de texto, una casilla de verificación o un botón nunca están dentro del rango.
Un campo está dentro del rango cuando se cumplen las tres condiciones:
- el tipo de input admite
min/max, - al menos uno de
minomaxestá definido, - el valor actual está entre los límites (inclusive).
En el momento en que el valor supera un límite, deja de coincidir con :in-range y empieza a coincidir con :out-of-range. Las dos pseudo-clases son mutuamente excluyentes, por lo que forman una combinación perfecta para estilos de "válido vs. inválido".
Sintaxis
:in-range {
/* style declarations */
}En la práctica, casi siempre se califica con input (o un selector más específico) para que solo afecte a los controles deseados:
input:in-range {
border-color: green;
}Dar estilo a un input dentro del rango
El siguiente ejemplo resalta un campo numérico mientras su valor se mantiene entre 1 y 10. Intenta cambiar el valor a 0 o 15 en el editor: el estilo del borde desaparece porque el campo ya no está dentro del rango.
<!DOCTYPE html>
<html>
<head>
<title>:in-range example</title>
<style>
input:in-range {
border: 2px solid #666;
}
</style>
</head>
<body>
<h2>:in-range selector example</h2>
<form>
<input type="number" min="1" max="10" value="5" />
</form>
</body>
</html>Combinar in-range con out-of-range
Dado que los dos estados nunca se solapan, un patrón habitual es aplicar estilo a ambos a la vez: verde mientras el valor es válido, rojo en el instante en que sale de la banda permitida.
<!DOCTYPE html>
<html>
<head>
<title>:in-range and :out-of-range</title>
<style>
input:in-range {
border: 2px solid green;
}
input:out-of-range {
border: 2px solid red;
}
</style>
</head>
<body>
<label>Quantity (1–10):</label>
<input type="number" min="1" max="10" value="5" />
</body>
</html>Combinación con otras pseudo-clases
:in-range puede encadenarse con otras pseudo-clases — por ejemplo :hover o :focus — para refinar aún más la retroalimentación:
input:in-range:focus {
outline: 2px solid green;
}Notas y consideraciones
:in-rangerefleja el valor actual, por lo que el estilo se actualiza en tiempo real a medida que el usuario escribe o mueve un control deslizante.- Un campo vacío con
min/maxse considera dentro del rango (no hay ningún valor que viole el límite), por lo que combínalo con:requiredsi un valor vacío debe tratarse como inválido. minymaxsolo restringen el estilo aquí — siguen siendo aplicados por las pseudo-clases de validación nativas como:valide:invalidcuando se envía el formulario.