:invalid

:invalid es una pseudo-clase que representa cuando un elemento <input> es inválido, basado en la información de sus atributos. Es decir que aplica estilos cuando la información es incorrecta.

input[type="email"]:invalid {
    background: red;
}

Esto cambia dependiendo del tipo de input y de sus atributos, no es lo mismo verificar un number que un email o un url, incluso el hecho de usar required cambia la validación.

Uso

El uso va de verificar desde CSS si el estado es inválido o no y a partir de esa condición aplicar los estilos correspondientes.

<input type="email" name="email" placeholder="email" />
<input type="email" name="email" placeholder="email" required />
/* Aplica fondo rojo a todos los inputs tipo email inválidos */
input[type="email"]:invalid {
	background: #EB5757;
}
Ejemplo en vivo
Nota

Debido a que el primer input no tiene el atributo required automáticamente se convierte en un elemento válido. No importa si hay un email o no, la información se va a poder enviar en el formulario. De manera contraría, el otro input si es inválido por tener el atributo required.

Como mencione antes, todo depende del tipo de input y sus atributos. He aquí algunos ejemplos de un formulario con datos inválidos, hasta que cumplen con su condición.

<div class="wrapper">
	<label>URL</label>
	<input type="url" placeholder="url" required />
</div>

<div class="wrapper">
	<label>Email</label>
	<input type="email" placeholder="email" required />
</div>

<div class="wrapper">
	<label>Digita un número del 0 al 9</label>
	<input type="text" pattern="[0-9]{1}" placeholder="number" required />
</div>

<div class="wrapper">
	<label>Digita un número</label>
	<input type="number" placeholder="number" required />
</div>

<div class="wrapper">
	<label>Digita al menos 3 valores</label>
	<input type="text" placeholder="number" required minlength="3" />
</div>
input:invalid {
  background: #EB5757;
}
Ejemplo en vivo

Recursos

Comparte tu opinión o duda:
Se parte de mi newsletter

Compartiré contigo las últimas novedades del sitio y otros recursos sobre desarrollo web que no te puedes perder.