A :optionalpseudo classe tem como alvo entradas (incluindo s) que não são definidas especificamente como required(não têm o requiredatributo).
Isso pode ser útil quando você deseja dar aos campos opcionais uma aparência específica, talvez um pouco menos visível do que os obrigatórios.
Sintaxe
input(type=text):optional ( border: 1px solid #eee; )Demo
Na demonstração a seguir, os campos opcionais (“Nome”, “Sexo” e “Continente”) têm sua opacidade reduzida para 40% para que os usuários possam saber imediatamente quais são os campos obrigatórios. Neste caso, “Email”. Quando pairado, uma entrada opcional fará com que a opacidade volte para 100%.
O optionalfunciona em todos os tipos de elementos de formulário: entradas de texto de todos os tipos, botões de opção, caixas de seleção e seleções.
Nota: você não pode saber com CSS apenas que um rótulo está associado a um campo opcional, a menos que o rótulo venha após a entrada (e você use um combinador irmão), o que é raro e geralmente não é uma boa ideia. Talvez no futuro os seletores principais possam ajudar com isso.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Nenhum | 5+ |
Observe que :optionalnão é exatamente o oposto de :not(:required)porque o último corresponderá a todos os tipos de elementos enquanto :optionalestá restrito aos elementos do formulário.