: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;
}
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;
}