:optional

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

A pseudo-classe CSS :optional representa qualquer elemento <input>, <select>, ou <textarea> que não contenha o atributo required.

css
/* 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

Error: could not find syntax for this item

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
HTML
# selector-optional
Selectors Level 4
# optional-pseudo

Compatibilidade com navegadores

Ver também