Pseudoclase invalid

La pseudoclase invalid define el estilo para un input que ha recibido un valor incorrecto o un valor que no coincide con el tipo especificado.

Sintaxis

cssselector:invalid {

}

Ejemplo

Vamos a cambiar el fondo del input a color rosa cuando se introduce un valor incorrecto y de vuelta a verde, cuando el valor ha pasado la validación del tipo seleccionado:

html<p>Introduce tu email</p>
<p><input type="email"></p>

cssinput:invalid {
  background: #E37D76;
}
input:valid {
  background: #9DDFA4;
}

Результат:

Ver también

la pseudoclase :valid,
que define el estilo para un input que ha recibido un valor correcto
la pseudoclase :default,
que define el estilo para los elementos por defecto
la pseudoclase :in-range,
que define el estilo para los elementos con un rango de valores especificado
la pseudoclase :out-of-range,
que define el estilo para los elementos cuyos valores están fuera del rango especificado