Jak stylizować pola wyboru za pomocą CSS bez użycia…

Aby ostylować pole wyboru bez bibliotek, można użyć kombinacji ukrycia standardowego elementu i stylizacji pseudo-elementów ::before lub ::after powiązanych z nadrzędnym <label>.

Ukrycie standardowego pola wyboru:

input[type="checkbox"] {
  display: none; /* lub visibility: hidden; height: 0; width: 0; */
}

Tworzenie stylizowanego "kwadratu" za pomocą pseudo-elementu <label>:

input[type="checkbox"] + label::before {
  content: ''; /* Konieczne do wyświetlenia pseudo-elementu */
  display: inline-block;
  width: 1em; /* Rozmiar kwadratu */
  height: 1em; /* Rozmiar kwadratu */
  border: 1px solid #ccc; /* Ramka kwadratu */
  margin-right: 0.5em; /* Odstęp od tekstu */
  vertical-align: middle; /* Wyrównanie pionowe */
  /* Inne opcjonalne style: background-color, border-radius, box-shadow */
}

Styl dla stanu zaznaczonego:

Używamy selektora checked dla input i odpowiednio zmieniamy style pseudo-elementu label.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Kolor tła zaznaczonego pola */
  border-color: #007bff; /* Kolor ramki zaznaczonego pola */
  /* Inne opcjonalne style */
}

Dodanie "ptaszka" (lub innego wskaźnika):

Można użyć drugiego pseudo-elementu (::after) lub stylizować istniejący ::before za pomocą background-image (svg, data-url) lub stylów border.

Przykład z border do tworzenia ptaszka:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Szerokość linii ptaszka */
  height: 0.7em; /* Wysokość linii ptaszka */
  border-right: 2px solid white; /* Prawa część ptaszka */
  border-bottom: 2px solid white; /* Dolna część ptaszka */
  transform: rotate(45deg); /* Obrót do utworzenia ptaszka */
  position: absolute; /* Do pozycjonowania wewnątrz ::before */
  top: 0.1em; /* Dostosowanie pozycji */
  left: 0.3em; /* Dostosowanie pozycji */
  /* Rodzicowi label::before może być potrzebne position: relative; */
}

Aby poprawnie działał ostatni przykład, dodaj position: relative; do input[type="checkbox"] + label::before:

input[type="checkbox"] + label::before {
  /* ... poprzednie style ... */
  position: relative; /* Dodane do pozycjonowania ::after */
}

Ten sposób zapewnia pełną kontrolę nad wyglądem pola wyboru i dobrą dostępność, ponieważ standardowy element nadal istnieje i reaguje na działania użytkownika (kliknięcie, fokus). Ważne jest powiązanie input z label za pomocą atrybutów id i for, aby działało poprawnie po kliknięciu na tekst etykiety.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Zgadzam się z warunkami</label>

Jak stylizować pola wyboru za pomocą CSS bez użycia bibliotek?