Jak stylovat zaškrtávací políčka pomocí CSS bez…

Pro stylizaci checkboxu bez použití knihoven můžete využít kombinaci skrytí standardního prvku a stylování pseudo-prvků ::before nebo ::after, které jsou spojeny s rodičovským <label>.

Skrytí standardního checkboxu:

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

Vytvoření stylizovaného "čtverce" pomocí pseudo-prvku <label>:

input[type="checkbox"] + label::before {
  content: ''; /* Povinné pro zobrazení pseudo-prvku */
  display: inline-block;
  width: 1em; /* Velikost čtverce */
  height: 1em; /* Velikost čtverce */
  border: 1px solid #ccc; /* Rámec čtverce */
  margin-right: 0.5em; /* Odstup od textu labelu */
  vertical-align: middle; /* Vertikální zarovnání */
  /* Další styly: background-color, border-radius, box-shadow */
}

Styl pro zaškrtnutý stav:

Používáme selektor checked pro input a odpovídajícím způsobem měníme styly pseudo-prvku label.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Barva pozadí zaškrtnutého checkboxu */
  border-color: #007bff; /* Barva rámečku zaškrtnutého checkboxu */
  /* Další styly podle potřeby */
}

Přidání "zaškrtnutí" (nebo jiného indikátoru):

Můžete použít druhý pseudo-prvek (::after) nebo stylovat stávající ::before pomocí background-image (svg, data-url) nebo stylování border.

Příklad s border pro vytvoření zaškrtnutí:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Šířka čáry zaškrtnutí */
  height: 0.7em; /* Výška čáry zaškrtnutí */
  border-right: 2px solid white; /* Pravá část zaškrtnutí */
  border-bottom: 2px solid white; /* Dolní část zaškrtnutí */
  transform: rotate(45deg); /* Otočení pro vytvoření zaškrtnutí */
  position: absolute; /* Pro pozicování uvnitř `::before` */
  top: 0.1em; /* Úprava pozice */
  left: 0.3em; /* Úprava pozice */
  /* Rodičovský `label::before` může potřebovat `position: relative;` */
}

Pro správnou funkčnost posledního příkladu přidejte k input[type="checkbox"] + label::before position: relative;:

input[type="checkbox"] + label::before {
  /* ... předchozí styly ... */
  position: relative; /* Přidává se pro pozicování `::after` */
}

Tento přístup zajišťuje úplnou kontrolu nad vzhledem checkboxu a dobrou přístupnost, protože standardní prvek stále existuje a reaguje na akce uživatele (kliknutí, fokus). Je důležité spojit input s label pomocí atributů id a for pro správnou funkčnost při kliknutí na text labelu.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Souhlasím s podmínkami</label>

Jak stylovat zaškrtávací políčka pomocí CSS bez použití knihoven?