Pseudoklasa :checked w CSS3

Definicja i użycie

CSS :checked Pseudoklasy są używane do dopasowania każdego wybranego <input> lub <option> elementów.

To dotyczy elementów <input type="radio">, <input type="checkbox"> oraz <select> z elementami <option>.

Przykład

Przykład 1

Ustaw cienką czerwoną obwódkę dla wszystkich wybranych elementów <input>:

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

Spróbuj sam

Przykład 2

Ustaw różne style dla przycisków wyboru, pól wyboru i opcji, gdy są wybrane:

input[type="radio"]:checked {
  box-shadow: 0 0 5px 3px niebieski;
}
input[type="checkbox"]:checked {
  box-shadow: 0 0 5px 3px czerwonawość;
}
option:checked {
  color: niebieski;
  background-color: różowy;
}

Spróbuj sam

Gramatyka CSS

:checked {
  deklaracje css;
}

Szczegóły techniczne

Wsparcie przeglądarki

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje ten pseudoklasz.