:checked
Pasuje do zaznaczonego pola wyboru, wybranego przycisku radio i wybranej opcji na liście select.
Przykład
#.switch input {
position: absolute;
opacity: 0;
}
.track {
width: 44px;
padding: 3px;
border-radius: 999px;
background: #3f3f46;
transition: background-color 0.2s;
}
.track::before {
content: "";
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
transition: translate 0.2s;
}
.switch input:checked + .track {
background: #7c3aed;
}
.switch input:checked + .track::before {
translate: 20px 0;
}
.switch input:focus-visible + .track {
outline: 2px solid #a78bfa;
outline-offset: 2px;
}<label class="switch" style="position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;">
<input type="checkbox">
<span class="track"></span>
Tryb nocny
</label>Kliknij przełącznik albo dojdź do niego klawiszem Tab i naciśnij spację. Prawdziwe pole wyboru jest niewidoczne, ale nadal działa.
Definicja i zastosowanie
#Pseudoklasa :checked odzwierciedla bieżący stan kontrolki: pasuje do <input type="checkbox"> i <input type="radio">, gdy są zaznaczone, oraz do wybranych elementów <option>. Zmienia się na żywo, w chwili kliknięcia, bez żadnego JavaScriptu.
To co innego niż selektor atrybutu [checked]. Atrybut w HTML opisuje tylko stan początkowy i nie zmienia się po kliknięciu, a :checked zawsze pokazuje stan aktualny.
Samą kontrolkę da się ostylować tylko w ograniczonym stopniu, dlatego :checked najczęściej łączy się z kombinatorem sąsiada (input:checked + label) albo z :has(), żeby zmienić etykietę, kartę czy cały wiersz. Kolor samego pola najprościej zmienisz przez accent-color.
Składnia
#selektor:checked { właściwość: wartość; }Typowe zastosowania
#- Tekst stojący zaraz za zaznaczonym polem. Klikaj pola i obserwuj etykiety.
- Cała etykieta z zaznaczonym polem w środku, dzięki
:has(). - Sama kontrolka: zaznaczone pola robią się większe i pomarańczowe.
- Dla porównania selektor atrybutu. Czerwona obwódka zostaje przy polach zaznaczonych w HTML, nawet gdy je odznaczysz.
Typowe zastosowania w praktyce
#input:checked + span
input:checked + span { color: #c4b5fd; font-weight: 700; }label:has(:checked)
:has().label:has(:checked) { background: #7c3aed; color: #fff; }input:checked
input:checked { accent-color: #f59e0b; scale: 1.3; }[checked]
[checked] { outline: 2px dashed #f43f5e; outline-offset: 2px; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Do zmiany koloru samego pola wyboru wystarczy
accent-color. Poappearance: nonei własny wygląd sięgaj, gdy potrzebujesz czegoś więcej. - Ukrywając prawdziwe pole, nie używaj
display: none. Pole zniknie wtedy także dla klawiatury i czytników ekranu. Wystarczyopacity: 0z pozycjonowaniem. [checked]to tylko stan początkowy zapisany w HTML. Do reagowania na kliknięcia zawsze używaj:checked.
Powiązane hasła
#- A + BZnak + wybiera element B, który stoi bezpośrednio za elementem A i ma z nim wspólnego rodzica.
- :has()Wybiera element na podstawie tego, co zawiera lub co stoi za nim. Pozwala stylować rodzica według jego dzieci.
- :disabledPasuje do wyłączonych elementów formularza, czyli takich, których nie da się kliknąć, zaznaczyć ani edytować.
- [atrybut]Wybiera elementy po atrybucie HTML i jego wartości: dokładnej, początku, końcu, fragmencie albo słowie z listy.
- accent-colorZmienia kolor akcentu kontrolek formularza: pól wyboru, przycisków opcji, suwaków i pasków postępu.
- appearanceWyłącza systemowy wygląd kontrolek formularza, żeby można je było stylować od zera.
Widzisz błąd albo brakuje przykładu? Napisz do nas.