Třída :optionalpseudo cílí na vstupy (včetně s), které nejsou konkrétně nastaveny jako required(nemají requiredatribut).
To může být užitečné, když chcete dát volitelným polím konkrétní vzhled, možná o něco méně viditelný než požadovaná.
Syntax
input(type=text):optional ( border: 1px solid #eee; )Ukázka
V následující ukázce byla u volitelných polí („Název“, „Pohlaví“ a „Kontinent“) snížena jejich neprůhlednost na 40%, takže uživatelé mohou okamžitě vědět, jaká jsou požadovaná pole. V tomto případě „Email“. Když umístíte ukazatel myši, na volitelném vstupu se opacita vrátí zpět na 100%.
Tyto optionalpráce na všechny typy formulářových prvků: textových vstupů všeho druhu, přepínače, zaškrtávací políčka a nastaví.
Poznámka: U CSS nemůžete vědět pouze to, že štítek je spojen s volitelným polem, pokud na štítku nenasleduje vstup (a nepoužíváte kombinátor sourozenců), což je vzácné a obvykle to není dobrý nápad. Možná v budoucnu s tím mohou selektory pomoci.
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Žádný | 5+ |
Všimněte si, že :optionalto není přesný opak, :not(:required)protože ten bude odpovídat všem typům prvků, zatímco :optionalje omezen na prvky formuláře.