De :optionalpseudo klasse henvender indgange (herunder s), der ikke specifikt er fastsat som required(ikke har requiredattribut).
Dette kan være nyttigt, når du vil give valgfri felter et specifikt udseende, måske lidt mindre synlige end de krævede.
Syntaks
input(type=text):optional ( border: 1px solid #eee; )Demo
I den følgende demo er valgfrit felt ("Navn", "Køn" og "Kontinent") nedsat deres opacitet til 40%, så brugerne straks kan vide, hvad de krævede felter er. I dette tilfælde “E-mail”. Når du holder markøren over, vil en valgfri input se opacitet gå tilbage til 100%.
De optionalarbejder på alle typer af formelementer: tekst input af alle typer, radioknapper, afkrydsningsfelter og vælger.
Bemærk: Du kan ikke kun vide med CSS, at en etiket er knyttet til et valgfrit felt, medmindre etiketten kommer efter input (og du bruger en søskendekombinator), hvilket er sjældent og normalt ikke en god idé. Måske kan forældrevælgerne i fremtiden hjælpe med dette.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Nogen | 5+ |
Bemærk, at :optionaldet ikke er det nøjagtige modsatte af, :not(:required)fordi sidstnævnte matcher alle typer elementer, mens det :optionaler begrænset til formelementerne.