V :optionalpseudo triedy cieľa vstupy (vrátane y), ktoré nie sú špecificky uvedené ako required(nemajú requiredatribút).
To môže byť užitočné, ak chcete dať voliteľným poliam konkrétny vzhľad, ktorý môže byť o niečo menej viditeľný ako požadované.
Syntax
input(type=text):optional ( border: 1px solid #eee; )Ukážka
V nasledujúcej ukážke majú voliteľné polia („Meno“, „Pohlavie“ a „Kontinent“) zníženú ich nepriehľadnosť na 40%, aby používatelia mohli okamžite vedieť, aké sú povinné polia. V takom prípade „Email“. Po umiestnení kurzora myši na voliteľný vstup sa nepriehľadnosť vráti na 100%.
Tieto optionalpráce na všetky typy formulárových prvkov: textových vstupov všetkého druhu, prepínače, zaškrtávacie políčka a nastaví.
Poznámka: Iba s CSS nemôžete vedieť, že štítok je spojený s voliteľným poľom, ibaže štítok nasleduje po zadaní (a použijete súrodenecký kombinátor), čo je zriedkavé a zvyčajne to nie je dobrý nápad. Možno s tým v budúcnosti môžu selektori pomôcť.
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | akýkoľvek | 5+ |
Upozorňujeme, že :optionalto nie je presný opak, :not(:required)pretože ten bude zodpovedať všetkým typom prvkov, pričom :optionalje obmedzený na prvky formulára.