CSS :out-of-range Pseudoclase
La pseudoclase CSS :out-of-range selecciona elementos con un valor fuera del rango definido por los atributos min y max. Practica con ejemplos.
La pseudoclase CSS :out-of-range coincide con un campo de formulario cuyo valor actual está fuera del rango permitido definido por sus atributos min y/o max. Permite ofrecer al usuario retroalimentación visual inmediata — un borde rojo, un color de advertencia, un mensaje de aviso — en el momento en que escribe un número demasiado bajo o demasiado alto, sin necesidad de JavaScript.
Esta página explica con precisión a qué elementos se aplica :out-of-range, en qué se diferencia de :in-range e :invalid, y muestra ejemplos ejecutables que puedes copiar.
:out-of-range solo coincide con elementos <input> que tienen un atributo min y/o max y admiten restricciones de rango — es decir, type="number", type="range" y los tipos de fecha/hora (date, month, week, time, datetime-local). En cualquier otro input nunca coincide.
Cuándo coincide la pseudoclase
Un input está "fuera de rango" cuando se cumplen todas las condiciones siguientes:
- Tiene un atributo
miny/omax. - Contiene actualmente un valor que el navegador puede analizar.
- Ese valor es menor que
mino mayor quemax.
Algunas consecuencias que conviene recordar:
- Los inputs vacíos nunca coinciden. Sin valor no hay nada que comparar, por lo que
:out-of-rangeesfalse(y:in-rangetambién esfalse). - Se trata exclusivamente del rango numérico o de fecha. Un desajuste en
step(por ejemplo1.5cuandostep="1") hace que el input sea:invalid, pero no lo convierte en:out-of-range. - La pseudoclase se actualiza en tiempo real mientras el usuario edita el campo, de modo que los estilos cambian al instante.
Versión
Sintaxis
:out-of-range {
/* css declarations */
}Casi siempre se combina con el tipo de input para mayor claridad:
input:out-of-range {
border: 3px solid #d9534f;
}Ejemplo del selector :out-of-range
El input a continuación acepta meses del 1 al 12, pero empieza en 15, por lo que el borde aparece resaltado al cargarse. Cambia el valor a algo entre 1 y 12 y el resaltado desaparece.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:out-of-range {
border: 3px solid #8ebf42;
}
</style>
</head>
<body>
<h2>:out-of-range selector example</h2>
<form>
<input type="number" min="1" max="12" value="15" />
</form>
</body>
</html>Combinar :out-of-range con :in-range
:out-of-range y :in-range son opuestos: como máximo uno de ellos coincide a la vez, y ninguno coincide con un input vacío. Dar estilo a ambos proporciona una interfaz completa de "valor válido / valor inválido":
<!DOCTYPE html>
<html>
<head>
<title>In-range and out-of-range</title>
<style>
input:in-range {
border: 2px solid #2e8b57;
}
input:out-of-range {
border: 2px solid #d9534f;
background-color: #fde9e9;
}
</style>
</head>
<body>
<label>Pick a quantity (1–10):</label>
<input type="number" min="1" max="10" value="25" />
</body>
</html>:out-of-range vs :invalid
Estas dos se confunden con frecuencia. :invalid es la regla más amplia — coincide con cualquier restricción incumplida, incluyendo un valor required ausente, un correo electrónico mal formado o un desajuste en step. :out-of-range es más específica: solo se activa cuando un valor es inferior a min o superior a max.
Un valor fuera de rango también es inválido, por lo que :invalid también coincidirá con él. Usa :out-of-range cuando quieras indicarle específicamente al usuario "ese número es demasiado grande/pequeño" en lugar de un error genérico. Consulta :invalid y :valid para las pseudoclases de validación más generales.
:out-of-range aplica estilos al campo, pero no impide el envío del formulario por sí sola. Combínala con la validación integrada del navegador (que bloquea el envío de un valor fuera de rango cuando se establecen min/max) o con comprobaciones en el servidor. Nunca confíes solo en CSS para garantizar la integridad de los datos.
Pseudoclases relacionadas
:in-range— el opuesto de este selector.:validy:invalid— coinciden con la validez global de un control de formulario.:requiredy:optional— coinciden según el atributorequired.