02/03/2019
Рассмотрим стилизацию чекбоксов

Стилизация чекбокса

Создадим input с типом checkbox и span. Затем обернём их в label чтобы связать label и input. Это необходимо для того чтобы при нажатии на текст изменялось состояние чекбокса.

<label class="label-check option">
  <input type="checkbox" class="label-check__input">
  <span class="label-check__new-input"></span>
  Чекбокс
</label>

Стилизуем новоиспечённый чекбокс: скроем стандартный input и при помощи оператора + (сложения) в состоянии :checked будем закрашивать чекбокс.

.label-check {
  cursor: pointer;
  margin-left: 35px;
  position: relative
}

/* Cкрываем стандартный чекбокс */
.label-check__input {
  display: none;
}

/* Новый чекбокс */
.label-check__new-input {
  position: absolute;
  left: -35px;
  top: 4px;
  width: 1.3em;
  height: 1.3em;
  border: 1px solid #cfcfd1;
  border-radius: 3px;
}

/* Новый чекбокс при выборе */
.label-check__input:checked + .label-check__new-input {
  background: #2f4857;
}

Реализуем отметку чекбокса картинкой и добавим немного анимации

.label-check__input:checked + .label-check__new-input {
  background: url('image-name.png') no-repeat center;
  animation: animation-checkbox 0.4s ease-in-out;
}
@keyframes animation-checkbox {
  0% {
    transform: scale(0.8);
  }
  70% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

Подробнее о css анимации

Стилизация чекбокса при помощи псевдоэлементов

HTML

<label class="form-label">
  <input class="mycheckbox" type="checkbox">
  <span class="checkbox-new"></span>
  <span class="checkbox-new-descr">Чекбокс</span>
</label>

CSS

.mycheckbox {
  display: none;
}
.checkbox-new {
  border-radius: 3px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 9px;
  width: 23px;
  height: 23px;
  border: 1px solid #ccc;
  position: relative;
}
.checkbox-new::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  background-color: #f05;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: 0.2s ease-in;
}
.mycheckbox:checked+.checkbox-new::after {
  width: 21px;
  height: 21px;
}
.checkbox-new-descr {
  line-height: 30px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

Аналогично стилизуется input типа радио

Изучаем английский
EnglishRussian
InputВвод (данных)
CheckboxФлажок
LabelЯрлык, метка
BeforeДо, перед
CheckedПроверен, проверено
➤ ➤