:default

Il pseudo-selettore :default può essere utilizzato per selezionare il valore predefinito in un gruppo di elementi associati tra loro, come per esempio il bottone radio che viene selezionato di default all’interno di un gruppo di bottoni.

input[type="radio"]:default + label {
  color: yellow;
  font-weight: bold;
}

Il codice CSS dell’esempio andrà a selezionare l’etichetta appartenente al bottone radio che viene selezionato di default all’interno di un gruppo di più bottoni radio:

Il testo dell’etichetta del pulsante giallo sarà in grassetto e di colore giallo, ovviamente nei browser che supportano il selettore.

Altri Esempi

Negli esempi seguenti viene dimostrato il funzionamento del selettore con il pulsante di invio predefinito all’interno di un gruppo di bottoni, con l’opzione predefinita di un menu a tendina, con il bottone radio che ha l’attributo checked impostato e con le caselle di controllo spuntate di default.

Supporto dei Browser

I vari browser supportano questo selettore a vari livelli. Su Firefox il supporto è completo, mentre i browser basati su Webkit supportano :default sui bottoni ma non sui pulsanti di opzione o sulle caselle di controllo, mentre su Opera la situazione è invertita. Ricapitolando:

  • Firefox supporta :default sulle checkbox, sui radio buttons e sugli input di tipo submit;
  • I browser basati su WebKit (tra cui Chrome e Safari) supportano :default sui pulsanti submit;
  • Opera supporta :default sulle checkbox e sui radio buttons;
  • Internet Explorer non supporta :default in alcun modo.

Il numero indica la versione minima del browser in cui la feature sia supportata. Per ottenere maggiori informazioni, passare con il mouse sopra la versione.

Desktop

chrome
Google Chrome
51
firefox
Mozilla Firefox
4
ie
Internet Explorer
No
edge
Microsoft Edge
79
opera
Opera
38
safari
Apple Safari
10

Mobile / Tablet

and_chr
Android Chrome
104
and_ff
Android Firefox
101
android
Android
104
samsung
Samsung Internet
5.0
op_mob
Opera Mobile
64
ios_saf
iOS Safari
10

Queste statistiche sul supporto da parte dei browser provengono da Caniuse, che potete visitare per informazioni più dettagliate.