:optionalPseudo klassi eesmärkide sisendite (sh s), mis ei ole spetsiaalselt määratud required(pole requiredatribuut).
See võib olla kasulik, kui soovite anda valikulistele väljadele konkreetse ilme, võib-olla veidi vähem kui nõutavad väljad.
Süntaks
input(type=text):optional ( border: 1px solid #eee; )Demo
Järgmises demos on valikuliste väljade („Nimi”, „Sugu” ja „Mandri”) läbipaistmatus alandatud 40% -ni, et kasutajad saaksid kohe teada, millised on kohustuslikud väljad. Sel juhul „Email“. Kui kursor on hõljutatud, näib läbipaistmatus 100% -ni.
optionalTöötab kõiki tüüpi vormi elemente: teksti sisendite kõik tüübid, nööpe ruudud ja valib.
Märkus: ainult CSS-iga ei saa teada, et silt on seotud valikulise väljaga, välja arvatud juhul, kui silt tuleb sisendi järel (ja kasutate õde-õde kombinaatorit), mis on haruldane ja pole tavaliselt hea mõte. Võib-olla saavad vanemvalijad selles tulevikus abi olla.
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Ükskõik | 5+ |
Pange tähele, et :optionalsee pole täpne vastand, :not(:required)sest viimane sobib igat tüüpi elementidega, samas kui see :optionalon piiratud vormielementidega.