Kaip stilizuoti žymės langelius su CSS be bibliotekų…

Be be būdų, kaip stilizuoti žymės langelį be bibliotekų, galima naudoti standartinio elemento paslėpimą ir pseudo-elementų ::before arba ::after stilizavimą, kurie yra susiję su tėviniu <label>.

Standartinio žymės langelio paslėpimas:

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

Sukurti stilizuotą "kvadratą" naudojant pseudo-elementą <label>:

input[type="checkbox"] + label::before {
  content: ''; /* Būtina pseudo elemento rodymui */
  display: inline-block;
  width: 1em; /* Kvadrato dydis */
  height: 1em; /* Kvadrato dydis */
  border: 1px solid #ccc; /* Kvadrato rėmelis */
  margin-right: 0.5em; /* Atskirtimas nuo žymės teksto */
  vertical-align: middle; /* Vertikalus išlyginimas */
  /* Kiti stiliai: background-color, border-radius, box-shadow */
}

Stilius pažymėtam būsenai:

Naudojame checked selektorių input ir atitinkamai keičiame pseudo elemento label stilių.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Pažymėto langelio fonas */
  border-color: #007bff; /* Pažymėto langelio rėmelio spalva */
  /* Kiti stiliai pagal poreikį */
}

Pridėti "varnelę" (ar kitą indikatorių):

Galite naudoti antrą pseudo-elementą (::after) arba stilizuoti esamą ::before naudojant background-image (svg, data-url) arba border stilizaciją.

Pavyzdys su border kuriant varnelę:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Varnelės linijos plotis */
  height: 0.7em; /* Varnelės linijos aukštis */
  border-right: 2px solid white; /* Dešinė varnelės dalis */
  border-bottom: 2px solid white; /* Apatinė varnelės dalis */
  transform: rotate(45deg); /* Pasukimas formuojant varnelę */
  position: absolute; /* Pozicionavimui viduje `::before` */
  top: 0.1em; /* Pozicijos koregavimas */
  left: 0.3em; /* Pozicijos koregavimas */
  /* Tėvinis `label::before` gali reikėti `position: relative;` */
}

Norint, kad paskutinis pavyzdys veiktų teisingai, pridėkite position: relative; prie input[type="checkbox"] + label::before:

input[type="checkbox"] + label::before {
  /* ... ankstesni stiliai ... */
  position: relative; /* Skirtas `::after` pozicionavimui */
}

Šis požiūris užtikrina visišką kontrolę virš žymės langelio išvaizdos ir gerą prieinamumą, nes standartinis elementas vis dar egzistuoja ir reaguoja į naudotojo veiksmus (paspaudimas, fokusas). Svarbu susieti input su label naudojant id ir for atributus, kad veiktų teisingai paspaudus ant teksto.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Sutinku su sąlygomis</label>

Kaip stilizuoti žymės langelius su CSS be bibliotekų?