Как стилизовать чекбоксы с помощью CSS без использования библиотек?

Для стилизации чекбокса без библиотек можно использовать комбинацию скрытия стандартного элемента и стилизации псевдоэлементов ::before или ::after asociado с родительским <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>