Kako stilizovati čekboksove pomoću CSS bez korišćenja…

За стилизацију квадратића за потврду без библиотека можете користити комбинацију скривања стандардног елемента и стилизовања псевдо-елемената ::before или ::after који су повезани са родитељским <label>.

Скривање стандардног квадратића:

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

Креирање стилизованог "квадрата" помоћу псевдо-елемента <label>:

input[type="checkbox"] + label::before {
  content: ''; /* Обавезно за приказ псевдо-елемента */
  display: inline-block;
  width: 1em; /* Размер квадрата */
  height: 1em; /* Размер квадрата */
  border: 1px solid #ccc; /* Рамка квадрата */
  margin-right: 0.5em; /* Размак од текста етикете */
  vertical-align: middle; /* Вертикално поравнање */
  /* Други стилови: background-color, border-radius, box-shadow */
}

Стил за означено стање:

Користимо селектор checked за input и одговарајуће мењамо стилове псевдо-елемента label.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Боја позадине означеног квадратића */
  border-color: #007bff; /* Боја ивице означеног квадратића */
  /* Други стилови по жељи */
}

Додавање "попуне" (или другог индикатора):

Можете користити други псевдо-елемент (::after) или стилизовати постојећи ::before помоћу background-image (svg, data-url) или стилизовањем border.

Пример са border за креирање попуне:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Ширина линије попуне */
  height: 0.7em; /* Висина линије попуне */
  border-right: 2px solid white; /* Десни део попуне */
  border-bottom: 2px solid white; /* Доњи део попуне */
  transform: rotate(45deg); /* Окрећење за формирање попуне */
  position: absolute; /* За позиционирање унутар `::before` */
  top: 0.1em; /* Прилагођавање позиције */
  left: 0.3em; /* Прилагођавање позиције */
  /* Родитељски `label::before` може захтевати `position: relative;` */
}

За исправан рад последњег примера, додајте position: relative; на input[type="checkbox"] + label::before:

input[type="checkbox"] + label::before {
  /* ... претходни стилови ... */
  position: relative; /* За позиционирање `::after` */
}

Овај приступ обезбеђује потпуну контролу над изгледом квадратића за потврду и добру приступачност, јер стандардни елемент и даље постоји и реагује на корисничке акције (клик, фокус). Важно је повезати input са label помоћу атрибута id и for за исправан рад при клику на текст етикете.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Сагласан сам са условима</label>

Kako stilizovati čekboksove pomoću CSS bez korišćenja biblioteka?