:required
A pseudo-classe CSS :required
representa qualquer <input>
, <select>
, ou <textarea>
contendo o atributo required
.
/* Seleciona qualquer <input> requerido */
input:required {
border: 1px dashed red;
}
Esta pseudo-classe é utilizada para destacar campos que devem ter dados válidos antes do formulário ser submetido.
Nota: A pseudo-classe :optional
seleciona campos do formulário que são opcionais.
Sintaxe
Exemplos
Veja :invalid
como exemplo.
Preocupações com acessibilidade
Elementos <input>
obrigatórios devem ter o atributo required
atribuídos. Isso garante que pessoas que navegam com auxílio de recursos de acessibilidade, como o leitor de tela, possam entender quais campos precisam ter conteúdos válidos para garantir a submissão dos dados .
Se o formulário também possui campos opcionais, entradas requeridas devem ser indicadas visualmente usando um tratamento que não seja apenas a cor para passar o significado. Usualmente, textos descritivos e/ou um ícone são utilizados.
Especificações
Especificação | Status | Comentário |
---|---|---|
HTML Living Standard The definition of ':required' in that specification. |
Padrão em tempo real | Sem mudança. |
HTML5 The definition of ':required' in that specification. |
Recomendação | Define a semântica de validação e de restrição HTML. |
Selectors Level 4 The definition of ':required' in that specification. |
Rascunho atual | Sem mudança. |
CSS Basic User Interface Module Level 3 The definition of ':required' in that specification. |
Recomendação | Define a pseudo-classe, mas não a semântica associada. |
Compatibilidade com navegadores
BCD tables only load in the browser
Veja também
- Outras pseudo-classe relacionadas a validação:
:optional
,:invalid
,:valid
- Validação de dados de formulário (en-US)