La :optionalpseudo classe ha come target input (inclusi i) che non sono specificatamente impostati come required(non hanno l' requiredattributo).
Questo può essere utile quando si desidera dare ai campi opzionali un aspetto specifico, magari leggermente meno visibile di quelli obbligatori.
Sintassi
input(type=text):optional ( border: 1px solid #eee; )Demo
Nella demo seguente, i campi opzionali ("Nome", "Sesso" e "Continente") hanno la loro opacità ridotta al 40% in modo che gli utenti possano immediatamente sapere quali sono i campi obbligatori. In questo caso, "Email". Quando si passa, un input opzionale vedrà l'opacità tornare al 100%.
Le optionalopere su tutti i tipi di elementi del modulo: ingressi di testo di tutti i tipi, pulsanti di opzione, caselle di controllo e seleziona.
Nota: non puoi sapere solo con i CSS che un'etichetta è associata a un campo facoltativo, a meno che nell'etichetta non venga dopo l'input (e usi un combinatore di pari livello), il che è raro e di solito non è una buona idea. Forse in futuro i selezionatori dei genitori possono aiutare con questo.
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Qualunque | 5+ |
Nota che :optionalnon è l'esatto opposto di :not(:required)perché quest'ultimo corrisponderà a tutti i tipi di elementi mentre :optionalè limitato agli elementi del modulo.