:optional
A pseudo-classe CSS :optional
representa qualquer elemento <input>
, <select>
, ou <textarea>
que não contenha o atributo required
.
/* Selects qualquer <input> opcional */
input:optional {
border: 1px dashed black;
}
Esta pseudo-classe é utilizada para estilizar campos do formulário que não são requeridos para sumissão.
Nota: A pseudo-classe :required
seleciona campos do fumulário requeridos.
Sintaxe
Exemplos
Veja :invalid
como exemplo.
Referências de acessibilidade
Se um formulário contém <input>
opcionais, inputs requeridos devem ser indicados utilizando o atriuto required
. Isto garantirá que usuários que navegam com tecnologia de acessibilidade, como um leitor de tela, possam entender quais entradas devem ter o conteúdo validado para submeter o formulário com êxito.
Entradas requeridas devem ser indicadas visualmente, utilizando 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
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of ':optional' in that specification. |
Padrão em tempo real | Sem mudança. |
HTML5 The definition of ':optional' in that specification. |
Recomendação | Define a semântica da validação e da restrição do HTML. |
Selectors Level 4 The definition of ':optional' in that specification. |
Rascunho atual | Sem mudança. |
CSS Basic User Interface Module Level 3 The definition of ':optional' 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
Ver também
- Outra pseudo-classes de validação relacionadas:
:required
,:invalid
,:valid
- Validação de dados de formulário (en-US)