Pseudo-classe :checked di CSS3

Definizione e uso

CSS :checked I pseudo-classe vengono utilizzati per abbinare qualsiasi elemento selezionato <input> o <option> elementi.

Questo si applica agli elementi <input type="radio">, <input type="checkbox"> e <select> con <option>.

Esempio

Esempio 1

Imposta un contorno sottile rosso per tutti gli elementi <input> selezionati:

input:checked {
  outline: 1px solid red;
}

Prova personalmente

Esempio 2

Imposta stili diversi per i pulsanti di scelta singola, caselle di controllo e opzioni quando sono selezionati:

input[type="radio"]:checked {
  box-shadow: 0 0 5px 3px blue;
}
input[type="checkbox"]:checked {
  box-shadow: 0 0 5px 3px maroon;
}
option:checked {
  color: blue;
  background-color: pink;
}

Prova personalmente

Sintassi CSS

:checked {
  declarazioni css;
}

Dettagli tecnici

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta il pseudo-classe per la prima volta.