Ako štýlovať zaškrtávacie políčka pomocou CSS bez…

Pre styling checkboxa bez knižníc môžete použiť kombináciu skrytia štandardného prvku a štýlovania pseudo-prvkov ::before alebo ::after, ktoré sú spojené s rodičovským <label>.

Skrytie štandardného checkboxu:

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

Vytvorenie štýlovaného "štvorca" pomocou pseudo-prvku <label>:

input[type="checkbox"] + label::before {
  content: ''; /* Povinné pre zobrazenie pseudo-prvku */
  display: inline-block;
  width: 1em; /* Veľkosť štvorca */
  height: 1em; /* Veľkosť štvorca */
  border: 1px solid #ccc; /* Rámček štvorca */
  margin-right: 0.5em; /* Odstup od textu labelu */
  vertical-align: middle; /* Vertikálne zarovnanie */
  /* Iné štýly: background-color, border-radius, box-shadow */
}

Štýl pre označený stav:

Používame selektor checked pre input a zodpovedajúco meníme štýly pseudo-prvku label.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Farba pozadia označeného checkboxu */
  border-color: #007bff; /* Farba rámčeka označeného checkboxu */
  /* Iné štýly podľa potreby */
}

Pridanie "pipy" (alebo iného indikátora):

Môžete použiť druhý pseudo-prvok (::after) alebo štýlovať existujúci ::before pomocou background-image (svg, data-url) alebo štýlovania border.

Príklad s border na vytvorenie pipy:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Šírka línie pipy */
  height: 0.7em; /* Výška línie pipy */
  border-right: 2px solid white; /* Pravá časť pipy */
  border-bottom: 2px solid white; /* Dolná časť pipy */
  transform: rotate(45deg); /* Otočenie na vytvorenie pipy */
  position: absolute; /* Pre pozicovanie vo vnútri `::before` */
  top: 0.1em; /* Úprava pozície */
  left: 0.3em; /* Úprava pozície */
  /* Rodičovský `label::before` môže potrebovať `position: relative;` */
}

Pre správnu funkčnosť posledného príkladu pridajte k input[type="checkbox"] + label::before position: relative;:

input[type="checkbox"] + label::before {
  /* ... predchádzajúce štýly ... */
  position: relative; /* Pre pozicovanie `::after` */
}

Tento prístup zabezpečuje úplnú kontrolu nad vzhľadom checkboxu a dobrú dostupnosť, pretože štandardný prvok stále existuje a reaguje na akcie používateľa (klik, fokus). Je dôležité prepojiť input s label pomocou atribútov id a for pre správnu funkčnosť pri kliknutí na text etikety.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Súhlasím s podmienkami</label>

Ako štýlovať zaškrtávacie políčka pomocou CSS bez použitia knižníc?