Pseudo-clases CSS :in-range & :out-of-range
Modifica los estilos de inputs numéricos con valores max y min.
Soy muy fan de exprimir CSS al máximo. Cuanta menos lógica tenga nuestro JavaScript, mejor.
Las pseudo-clases :in-range y :out-of-range se activan cuando un elemento <input> tiene su valor dentro o fuera del rango especificado por sus atributos min y max.
Antes de entrar en detalle podéis probarlas en este CodePen:
Cómo usarlas
Lo primero que necesitamos es un input numérico con atributos max y min.
<input type="number" min="1" max="10">No importa qué número pongamos en min y max, las pseudo-clases :in-range y :out-of-range se aplicarán automáticamente al tener un valor dentro/fuera del rango.
El CSS es así de simple:
input:in-range {
background-color: lime;
}input:out-of-range {
background-color: red;
}
Por supuesto, podremos tener solo un límite superior con max o un límite inferior con min. Lo único que cambiará en ese escenario es el rango, pero el CSS nos serviría igual.
Y ya está. Así de sencillo.
Estas pseudo-clases son muy fáciles de implementar y nos evitarán poner nuestras propias clases de éxito/error en inputs numéricos con rango de valores. Además, nos libraremos de algo de lógica en los componentes, cosa que siempre se agradece.
👋 👋 ¡Hasta la próxima!
Referencias
- :in-range en MDN → https://developer.mozilla.org/es/docs/Web/CSS/:in-range
- :out-of-range en MDN → https://developer.mozilla.org/es/docs/Web/CSS/:out-of-range
