Kā stilizēt pārbaudes rūtiņas ar CSS bez bibliotēkām…

Bez bibliotēkām stilizēt izvēles rūtiņu var, apvienojot standarta elementa slēpšanu un pseidoelementu ::before vai ::after stilizēšanu, kas ir saistīti ar vecāka elementu <label>.

Standarta izvēles rūtiņas slēpšana:

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

Izveidot stilizētu "kvadrātu" ar pseidoelementu <label>:

input[type="checkbox"] + label::before {
  content: ''; /* Obligāti pseidoelementa attēlošanai */
  display: inline-block;
  width: 1em; /* Kvadrāta izmērs */
  height: 1em; /* Kvadrāta izmērs */
  border: 1px solid #ccc; /* Kvadrāta rāmis */
  margin-right: 0.5em; /* Atstarpe no teksta */
  vertical-align: middle; /* Vertikāla izlīdzināšana */
  /* Citi stili: background-color, border-radius, box-shadow */
}

Stils izvēles iezīmēšanai:

Izmanto checked selektoru input un attiecīgi maina pseidoelementa label stilus.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Aizpildījuma krāsa */
  border-color: #007bff; /* Rāmja krāsa */
  /* Citi stili pēc vajadzības */
}

"Poga" vai cita indikatoru pievienošana:

Var izmantot otro pseidoelementu (::after) vai stilizēt esošo ::before ar background-image (svg, data-url) vai border stilizāciju.

Piemērs ar border izveidotai pogai:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Poga līnijas platums */
  height: 0.7em; /* Poga līnijas augstums */
  border-right: 2px solid white; /* Labā puse */
  border-bottom: 2px solid white; /* Apakšējā puse */
  transform: rotate(45deg); /* Pagriešana, veidojot poga */
  position: absolute; /* Pozicionēšanai iekš `::before` */
  top: 0.1em; /* Pozīcijas korekcija */
  left: 0.3em; /* Pozīcijas korekcija */
  /* Vecāka `label::before` var prasīt `position: relative;` */
}

Lai pareizi darbotos pēdējais piemērs, pievienojiet position: relative; pie input[type="checkbox"] + label::before:

input[type="checkbox"] + label::before {
  /* ... iepriekšējie stili ... */
  position: relative; /* Lai pozicionētu `::after` */
}

Šis pieejas veids nodrošina pilnīgu kontroli pār izskatu un labu pieejamību, jo standarta elements joprojām pastāv un reaģē uz lietotāja darbībām (klikšķi, fokuss). Ir svarīgi saistīt input ar label izmantojot id un for atribūtus, lai tas darbotos pareizi, noklikšķinot uz teksta.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Piekrītu nosacījumiem</label>

Kā stilizēt pārbaudes rūtiņas ar CSS bez bibliotēkām?