CSS :valid Pseudo Classe
A pseudo-classe CSS :valid corresponde a controles de formulário cujo valor passa na validação. Veja como funciona com exemplos práticos.
A pseudo-classe :valid corresponde a qualquer controle de formulário (como <input>, <select> ou <textarea>) cujo valor atual passa na validação de restrição integrada do elemento. Ela oferece uma forma de reagir em CSS puro à aceitabilidade dos dados de um campo — sem necessidade de JavaScript.
Um controle é correspondido por :valid quando possui restrições de validação e seu valor satisfaz todas elas. Os gatilhos mais comuns incluem:
- Um
<input type="email">contendo um endereço corretamente formatado. - Um
<input type="number">cujo valor está dentro do intervalomin/max. - Um campo
type="url",type="date"outype="tel"com dados bem formados. - Um campo com atributo
patterncujo valor corresponde à expressão regular. - Um campo
requiredque não está vazio.
Esta pseudo-classe é a contraparte de :invalid. Juntas, permitem fornecer feedback visual imediato enquanto o usuário digita. Também está intimamente relacionada a :required, :optional e :in-range.
O que você precisa saber
- Um controle sem nenhuma restrição (por exemplo, um
<input type="text">simples semrequired,patternou limites de comprimento) é sempre considerado válido — ele corresponderá a:validmesmo quando estiver vazio. - A correspondência é atualizada em tempo real à medida que o usuário edita, não apenas no envio, portanto os estilos podem piscar enquanto alguém digita. Para atrasar o feedback, combine com
:focusou com as pseudo-classes:user-invalid/:user-valid. - A especificidade importa:
input:valideinput:invalidpossuem a mesma especificidade, portanto a regra declarada por último na folha de estilos prevalece em casos limítrofes. Mantenha a ordem intencional.
Versão
Sintaxe
Sintaxe CSS :valid
:valid {
css declarations;
}Exemplo do seletor :valid:
Exemplo de código CSS :valid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
border: 1px solid #cccccc;
padding: 5px 10px;
}
input:valid {
background-color: #eeeeee;
}
</style>
</head>
<body>
<h2>:valid selector example</h2>
<form>
<input type="email" value="[email protected]" />
</form>
</body>
</html>No exemplo acima, o fundo cinza desaparece no momento em que um endereço de e-mail inválido é inserido, porque o input não corresponde mais a :valid.
Exemplo com campos obrigatórios e indicação visual em verde
Um padrão comum é combinar :valid com :invalid para que cada campo exiba um estado claro de "correto / ainda não". Aqui, os campos obrigatórios ficam verdes assim que contêm dados aceitáveis e vermelhos enquanto não contêm:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
padding: 6px 10px;
margin-bottom: 10px;
display: block;
border: 2px solid #cccccc;
}
input:valid {
border-color: #2eca6a;
}
input:invalid {
border-color: #e3382c;
}
</style>
</head>
<body>
<h2>Valid vs. invalid fields</h2>
<form>
<input type="email" placeholder="Email" required />
<input type="number" min="1" max="10" placeholder="1 to 10" required />
</form>
</body>
</html>Como ambos os campos são required, eles começam correspondendo a :invalid (vazios) e mudam para :valid assim que você insere um e-mail válido e um número dentro do intervalo 1–10.
Pseudo-classes relacionadas
:invalid— o oposto exato: corresponde a controles que falham na validação.:requirede:optional— correspondem com base em se um controle é obrigatório.:in-range— corresponde a inputs numéricos/de data cujo valor está dentro demin/max.