23. :checked

Przeznaczenie selektora :checked

:checked { ... }

Selektor :checked odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :checked.

Cechy elementu HTML spełniają zasadę pseudoklasy :checked, gdy w danym momencie dany element HTML posiada atrybut checked lub gdy w danym momencie dany element HTML został wybrany przez użytkownika.

Informacje techniczne o selektorze :checked

ograniczenie - elementy HTML

  • element input typu checkbox

  • element input typu radio

ograniczenie - właściwości CSS

  • brak

Przykładowa reguła CSS, selektor :checked

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

Wyjaśnienie przykładowej reguły CSS

input:checked

  • do każdego elementu input, którego cechy w danym momencie spełniają zasadę pseudoklasy :checked

outline

  • dodaj właściwość CSS, która zmieni obrys elementu HTML

3px solid red

  • na obrys o szerokości trzech pikseli, stylu solid oraz kolorze czerwonym

Kod źródłowy przykładowego dokumentu HTML

Rezultat

Interpretacja selektora :checked

Last updated