Pseudoclasse valid
A pseudoclasse valid define o estilo
para inputs que receberam um valor correto
ou um valor que corresponde ao tipo
especificado.
Sintaxe
seletor: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:
<p>Digite seu email</p>
<p><input type="email"></p>
input: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
