Cum să stilizezi casetele de selectare cu CSS fără a…

Pentru a stiliza o casetă de selectare fără biblioteci, poți folosi o combinație de ascundere a elementului standard și stilizarea pseudo-elementelor ::before sau ::after asociate cu <label> părinte.

Ascundeți caseta de selectare standard:

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

Creați un "patrat" stilizat folosind pseudo-elementul <label>:

input[type="checkbox"] + label::before {
  content: ''; /* Necesită pentru afișarea pseudo-elemntului */
  display: inline-block;
  width: 1em; /* Dimensiunea pătratului */
  height: 1em; /* Dimensiunea pătratului */
  border: 1px solid #ccc; /* Bordura pătratului */
  margin-right: 0.5em; /* Spațiu între pătrat și text */
  vertical-align: middle; /* Aliniere verticală */
  /* Alte stiluri opționale: background-color, border-radius, box-shadow */
}

Stil pentru starea bifată:

Folosim selectorul checked pentru input și schimbăm stilurile pseudo-elemntului label corespunzător.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Culoarea de fundal a casetei bifate */
  border-color: #007bff; /* Culoarea bordurii casetei bifate */
  /* Alte stiluri opționale */
}

Adăugarea unei "bife" (sau alt indicator):

Se poate folosi un al doilea pseudo-element (::after) sau stiliza pe cel existent ::before cu background-image (svg, data-url) sau stiluri de border.

Exemplu cu border pentru crearea unei bife:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Lățimea liniei bifei */
  height: 0.7em; /* Înălțimea liniei bifei */
  border-right: 2px solid white; /* Partea dreaptă a bifei */
  border-bottom: 2px solid white; /* Partea de jos a bifei */
  transform: rotate(45deg); /* Rotire pentru formarea bifei */
  position: absolute; /* Pentru poziționare în interiorul ::before */
  top: 0.1em; /* Ajustare poziție */
  left: 0.3em; /* Ajustare poziție */
  /* Părintelui label::before poate fi necesar position: relative; */
}

Pentru ca ultima exemplu să funcționeze corect, adăugați position: relative; la input[type="checkbox"] + label::before:

input[type="checkbox"] + label::before {
  /* ... stilurile anterioare ... */
  position: relative; /* Adăugat pentru poziționarea ::after */
}

Această abordare asigură control complet asupra aspectului casetei de selectare și o bună accesibilitate, deoarece elementul standard încă există și răspunde la acțiunile utilizatorului (clic, focus). Este important să legați input cu label folosind atributele id și for pentru funcționare corectă la clic pe textul etichetei.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Sunt de acord cu termenii</label>

Cum să stilizezi casetele de selectare cu CSS fără a folosi biblioteci?