Как изменить чекбокс CSS

Для изменения стиля чекбокса в CSS вы можете использовать псевдоэлемент ::before и CSS-свойство content. Следуйте этим простым шагам:

Создайте HTML-разметку для чекбокса:

<label>
  <input type="checkbox" />
  <span>Мой чекбокс</span>
</label>

Создайте CSS-стиль для вашего нового элемента:

label {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 18px;
}

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

span {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: #eee;
}

input[type="checkbox"]:checked + span::before {
  content: "";
  position: absolute;
  display: block;
  top: 5px;
  left: 9px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

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

Надеюсь, это помогло!