Lo :defaultpseudo selettore corrisponderà al valore predefinito in un gruppo di elementi associati, come il pulsante di opzione in un gruppo di pulsanti selezionato per impostazione predefinita, anche se l'utente ha selezionato un valore diverso.
input(type="radio"):default + label:after ( content: ' (default)'; color: #999; font-style: italic; )Il CSS sopra ha come target l'etichetta che viene immediatamente dopo il pulsante di opzione selezionato predefinito in un gruppo di pulsanti di opzione:
- rosso
- verde
- blu
L'etichetta del pulsante di opzione verde sarà seguita dal testo "(predefinito)" in grigio, testo in corsivo nei browser supportati.
- rosso
- verde
- blu
Gli esempi includono il pulsante di invio predefinito in un gruppo di pulsanti, l'opzione predefinita da un menu popup, il pulsante di opzione con l' checkedattributo impostato nell'HTML (come mostrato nei browser di supporto) e le caselle di controllo selezionate per impostazione predefinita.
Più risorse
- Demo
- Pagina MDN attiva: impostazione predefinita
- Specifiche dell'interfaccia utente CSS3 W3C
- Selettori W3C Livello 4
Supporto browser
Browser diversi hanno diversi livelli di supporto. Firefox fornisce pieno supporto. I browser Webkit supportano l'impostazione predefinita sui pulsanti ma non sulla radio o sulle caselle di controllo e Opera è l'inverso, supportandolo sui pulsanti di opzione e sulle caselle di controllo, ma non sull'invio.
- Opera supporta le
:defaultcaselle di controllo e i pulsanti di opzione. - I browser Webkit, inclusi Chrome e Safari, supportano
:defaultil pulsante di invio - Firefox supporta la
:defaultcasella di controllo, la radio e l'invio di tipi di input. - Internet Explorer non supporta i
:defaulttipi di input su casella di controllo, radio o invio.
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10 | 5 | 4 | 10 | nessuna | nessuna | 5 |