Pseudoclase valid

La pseudoclase valid define estilos para inputs que contienen un valor correcto o un valor que coincide con el tipo especificado.

Sintaxis

cssselector:valid {
  
}

Ejemplo

Vamos a cambiar el color de fondo del input a 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 :invalid,
    que define estilos para un input que contiene un valor incorrecto
  • la pseudoclase :out-of-range,
    que define estilos para elementos cuyos valores están fuera del rango
  • la pseudoclase :in-range,
    que define estilos para elementos con un rango de valores definido