: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.

[caniuse feature=”css-default-pseudo”]