:valid es una pseudo-clase que representa cuando un elemento <input> es válido, basado en la información de sus atributos. Es decir que aplica estilos para validar cuando la información es correcta.
input[type="email"]:valid {
background: green;
}Esto cambia dependiendo del tipo de input y de sus atributos, no es lo mismo validad 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 vá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 verde a todos los inputs tipo email válidos */
input[type="email"]:valid {
background: #06D6A0;
}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.
Como mencione antes, todo depende del tipo de input y sus atributos. He aquí algunos ejemplos de como sería la validación en diferentes formularios:
<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:valid {
background: #06D6A0;
}