Pseudoclasse valid

A pseudoclasse valid define o estilo para inputs que receberam um valor correto ou um valor que corresponde ao tipo especificado.

Sintaxe

cssseletor:valid {
  
}

Exemplo

Vamos alterar o plano de fundo do input para rosa quando um valor inválido for inserido e de volta para verde quando o valor passar na verificação de correspondência do tipo selecionado:

html<p>Digite seu email</p>
<p><input type="email"></p>

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

Результат:

Veja também

a pseudoclasse :invalid,
que define o estilo para um input que recebeu um valor inválido
a pseudoclasse :out-of-range,
que define o estilo para elementos cujos valores estão fora de um intervalo especificado
a pseudoclasse :in-range,
que define o estilo para elementos com valores dentro de um intervalo especificado