Как да стилизирате чекбоксовете с CSS без използване…

За стилизиране на чекбокс без библиотеки можете да използвате комбинация от скриване на стандартния елемент и стилизиране на псевдоелементите ::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>

Как да стилизирате чекбоксовете с CSS без използване на библиотеки?