Den :optionalpseudo-klassen er rettet mot innganger (inkludert s) som ikke er spesifikt angitt som required(ikke har den requiredegenskap).
Dette kan være nyttig når du vil gi valgfrie felt et spesifikt utseende, kanskje litt mindre synlig enn de som kreves.
Syntaks
input(type=text):optional ( border: 1px solid #eee; )Demo
I den følgende demoen har valgfritt felt ("Navn", "Kjønn" og "Kontinent") senket opasitet til 40%, slik at brukerne umiddelbart kan vite hva som er obligatoriske felt. I dette tilfellet “E-post”. Når du holder musepekeren, vil en valgfri inngang se at opasiteten går tilbake til 100%.
Arbeidet optionalmed alle typer skjemaelementer: tekstinnganger av alle typer, radioknapper, avkrysningsruter og markerer.
Merk: du kan ikke bare med CSS vite at en etikett er tilknyttet et valgfritt felt, med mindre i etiketten kommer etter inngangen (og du bruker en søskenkombinator), noe som er sjelden og vanligvis ikke en god idé. I fremtiden kan foreldrevelgere hjelpe til med dette.
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Noen | 5+ |
Merk at :optionaldet ikke er den eksakte motsatsen til, :not(:required)fordi sistnevnte vil matche alle typer elementer mens den :optionaler begrenset til formelementene.