Как сделать кастомный чекбокс css

Чтобы создать кастомный чекбокс в CSS, необходимо заменить стандартный графический элемент input type=»checkbox» на свой собственный элемент с помощью CSS.

HTML:

<div class="checkbox-container">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Мой кастомный чекбокс</label>
</div>

CSS:

.checkbox-container {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

/* Скрываем стандартный checkbox */
.checkbox-container input[type="checkbox"] {
  display: none;
}

/* Создаем кастомный элемент */
.checkbox-container label:before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  background-color: #fff;
  border: 1px solid #ddd;  
}

/* При наведении делаем более ярким */
.checkbox-container label:hover:before {
  background-color: #eee; 
}

/* При выборе меняем цвет фона */
.checkbox-container input[type="checkbox"]:checked + label:before {
  background-color: #007bff;
  border-color: #007bff;
}

/* Создаем галочку */
.checkbox-container label:after {
  content: '\2713';
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
  color: #fff;
  background-color: #007bff;
  border: 1px solid #007bff;
  border-radius: 50%;
  position: absolute;
  left: 1px;
  top: 1px;
  opacity: 0;
  transition: all 0.2s;
}

/* Отобразим галочку при выборе */
.checkbox-container input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

/* Изменяем стиль текста при выборе */
.checkbox-container input[type="checkbox"]:checked + label {
  color: #007bff;
}

Этот код создаст кастомный чекбокс, заменяющий стандартный графический элемент на свой собственный. Кастомный элемент представляет собой квадрат с рамкой и белым фоном по умолчанию. При наведении мыши на элемент он становится светлее, а при выборе фон кастомного элемента меняется на синий. Мы также добавляем галочку, которая появляется при выборе элемента, и меняем стиль текста при выборе.

Вы можете настроить стили кастомного чекбокса на свой вкус, добавив свои стили и изменения, которые соответствуют вашим потребностям.