Делаем кастомный чекбокс (checkbox) на HTML и CSS

Значит так, задача очень простая сделать современный и кастомный чекбокс по средствам CSS и HTML. Без использования javascript. Причем кастомизировать его можно будет как угодно.

Для начала нам нужна обертка, пусть это будет обычный div. Внутрь мы положим input = checkbox, естественно label он будет выступать в качестве триггера. И рядом обыкновенный span элемент.

Логика простая, скрываем инпут, растягиваем label на 100% по ширине и высоте, а span будем заливать фоном по клику на label. Точнее даже не по клику, а по состоянию инпута.

Демо чекбокса:

Пример кода:

<div class="checkbox-wrapper">
  <label for="modern-checkbox"></label>
  <input type="checkbox" id="modern-checkbox">
  <span></span>
</div>

Стили

.checkbox-wrapper {
  width: 40px;
  height: 40px;
  border: 2px solid gray;
  margin: 30px auto;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: white;
}

.checkbox-wrapper input {
  display: none;
}

.checkbox-wrapper label {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  cursor: pointer;
  visibilty: hidden;
  position: absolute;
  z-index: 10;
}

.checkbox-wrapper span {
  width: 25px;
  height: 25px;
  display: inline-block;
  border-radius: 25px;
}

.checkbox-wrapper #modern-checkbox:checked+span {
  background: #0095ff;
}