La :optionalpseudo-classe cible les entrées (y compris les entrées ) qui ne sont pas spécifiquement définies comme required(ne possèdent pas l' requiredattribut).
Cela peut être utile lorsque vous souhaitez donner aux champs facultatifs un aspect spécifique, peut-être légèrement moins visible que les champs obligatoires.
Syntaxe
input(type=text):optional ( border: 1px solid #eee; )Démo
Dans la démo suivante, les champs facultatifs («Nom», «Sexe» et «Continent») ont leur opacité réduite à 40% afin que les utilisateurs puissent immédiatement savoir quels sont les champs obligatoires. Dans ce cas, «Email». Lorsqu'elle est survolée, une entrée facultative verra l'opacité revenir à 100%.
Cela optionalfonctionne sur tous les types d'éléments de formulaire: entrées de texte de tous types, boutons radio, cases à cocher et sélections.
Remarque: vous ne pouvez pas savoir avec CSS uniquement qu'une étiquette est associée à un champ facultatif, à moins que l'étiquette ne vienne après l'entrée (et que vous utilisez un combinateur frère), ce qui est rare et généralement pas une bonne idée. Peut-être qu'à l'avenir les sélecteurs de parents pourront vous aider.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Tout | 5+ |
Notez que ce :optionaln'est pas exactement l'opposé de :not(:required)car ce dernier correspondra à tous les types d'éléments tout en :optionalétant limité aux éléments du formulaire.