:invalid
A pseudo-classe CSS :invalid
representa qualquer elemento <input>
ou <form>
cujo conteúdo não esteja válido.
/* Seleciona todos os inputs inválidos */
input:invalid {
background-color: pink;
}
Essa pseudo-classe é útil para usuário identificar quais campos foram preenchidos incorretamente.
Sintaxe
Error: could not find syntax for this item
Exemplo
Esse exemplo apresenta um simples formulário onde a cor verde realça um input válido e a cor vermelha realça um input inválido.
HTML
<form>
<label for="url_input">Adicione uma URL:</label>
<input type="url" id="url_input" />
<br />
<br />
<label for="email_input">Adicione um endereço de email:</label>
<input type="email" id="email_input" required />
</form>
CSS
input:invalid {
background-color: #ffdddd;
}
form:invalid {
border: 5px solid #ffdddd;
}
input:valid {
background-color: #ddffdd;
}
form:valid {
border: 5px solid #ddffdd;
}
input:required {
border-color: #800000;
border-width: 3px;
}
input:required:invalid {
border-color: #c00000;
}
Resultado
Notas
Radio buttons
Se algum radio button de um grupo possuir o atributo required
, a pseudo-classe :invalid
é aplicada a todos se nenhum deles for selecionado. (Radio buttons agrupados compartilham o mesmo valor pelo atributo name
.)
Gecko defaults
Por padrão, Gecko não aplica o estilo para a pseudo-classe :invalid
. Entretanto, pode-se aplicar um estilo (um "brilho" vermelho usando a propriedade box-shadow
) à pseudo-classe :-moz-ui-invalid
, que são um conjunto que se aplicam como o :invalid
.
Você pode desabilitar o "brilho" usando o CSS a seguir, ou substituir completamente para alterar a aparência dos campos inválidos:
:invalid {
box-shadow: none;
}
:-moz-submit-invalid {
box-shadow: none;
}
:-moz-ui-invalid {
box-shadow: none;
}
Especificações
Specification |
---|
HTML Standard # selector-invalid |
Selectors Level 4 # validity-pseudos |
Compatibilidade com navegadores
BCD tables only load in the browser
Veja também
- Outras pseudo-classes relacionadas com validações:
:required
,:optional
,:valid
- Mozilla pseudo-classes relacionadas:
:-moz-ui-invalid
,:-moz-submit-invalid
- Form data validation