Existen cuatro pseudo clases en CSS que permiten aplicar reglas de estilo a ciertos campos de HTML 5 en base a que su contenido esté o no adaptado a lo que tales campos permiten. Estamos hablando, específicamente, de los campos de tipo date, que se emplean para fechas, o los de tipo number, que se emplean para que el usuario introduzca valores numéricos. Veamos como gestionarlos desde CSS.
LAS PSEUDO CLASES :valid E :invalid
Estas se usan con campos de tipo date, para que se apliquen determinadas reglas CSS, en base a que la fecha introducida tenga un formato válido o no. Observa el siguiente HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Pseudo clases</title> <link href="estilos.css" rel="stylesheet"> </head> <body> <p> <input type="date"> </p> </body> </html> |
Cómo ves, tenemos un campo de tipo fecha. Ahora observa el siguiente CSS.
|
1 2 3 4 5 6 7 8 |
input[type="date"]:valid{ border: 1px solid #0a6301; background-color: #9aef92; } input[type="date"]:invalid{ border: 1px solid red; background-color: #f9a4a4; } |
Cuando cargues la página, verás que, si seleccionas una fecha correcta, aparece el campo en verde. Sin embargo, si escribes a mano una fecha incorrecta (digamos, por ejemplo, 30/02/2017), el campo aparece en rojo.
Realmente, esto nos sirve cómo indicador de que la fecha es incorrecta, pero no evita que el usuario teclee una fecha incorrecta. Para eso tendríamos que recurrir a mecanismos de control específicos (como los que ofrecen Bootstrap o jQueryUI), o a prevalidaciones.
LAS PSEUDO CLASES :in-range Y :out-of-range
Estas dos se aplican sobre campos de tipo number, para poder dotarles de determinadas reglas CSS, según el valor tecleado esté dentro de un rango, o fuera del mismo. Observa el siguiente HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Pseudo clases</title> <link href="estilos.css" rel="stylesheet"> </head> <body> <p> <input type="number" min="10" max="20" value="15"> </p> </body> </html> |
Y ahora el correspondiente CSS:
|
1 2 3 4 5 6 7 8 |
input[type="number"]:in-range{ border: 1px solid #0a6301; background-color: #9aef92; } input[type="number"]:out-of-range{ border: 1px solid red; background-color: #f9a4a4; } |
Carga la página en el navegador y observa que el campo numérico aparece en verde. Si tecleas un número que esté fuera del rango especificado por los atributos min y max verás como el campo se pone en rojo.
RESUMEN
| PSEUDO CLASES DE CONTENIDO |
||
| SELECTOR | COMENTARIOS | |
:valid |
Se refiere a campos de tipo date que tienen una fecha correcta. |
|
:invalid |
Se refiere a campos de tipo date que tienen una fecha incorrecta. |
|
:in-range |
Se refiere a campos de tipo number que tienen un valor comprendido entre los límites establecidos por los atributos min y max. |
|
:out-of-range |
Se refiere a campos de tipo number que tienen un valor que está fuera de los límites establecidos por los atributos min y max. |
|
