Pseudo-clase CSS :invalid
La pseudo-clase CSS :invalid selecciona controles asociados a formularios (como <input>, <select> y <textarea>) que tienen un valor inválido según su configuración.
El selector :invalid se aplica a elementos de formulario con restricciones de validación, como campos <input> con atributos min y max (para tipos number, range y date), campos de correo electrónico sin una dirección válida, campos numéricos sin un valor numérico o campos obligatorios con un valor vacío.
Notas
Botones de opción
Cuando se requiere que se seleccione uno de los botones de opción de un grupo, el selector :invalid se aplica a todos ellos (si ninguno de los botones del grupo está seleccionado). Los botones de opción agrupados tienen el mismo valor para su atributo name.
Valores predeterminados de Gecko
De forma predeterminada, Gecko no aplica ningún estilo a la pseudo-clase :invalid (sin embargo, podemos aplicar un "resplandor" rojo con la box-shadow propiedad) pero sí aplica estilo a la pseudo-clase :-moz-ui-invalid, la cual se aplica en un subconjunto de casos para la pseudo-clase :invalid.
Pseudo-clase complementaria
Para contrastar, la pseudo-clase :valid selecciona los controles de formulario que superan sus restricciones de validación.
Versión
Sintaxis
Código de sintaxis de CSS :invalid
:invalid {
css declarations;
}Ejemplo del selector :invalid:
Ejemplo de código CSS :invalid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:invalid {
border: 2px solid #ff0000;
}
</style>
</head>
<body>
<h2>:invalid selector example</h2>
<form>
<input type="email" value="invalid-email" required />
</form>
</body>
</html>Práctica
¿Cuál es la función de la pseudo-clase ':invalid' en CSS?