Моргание чекбокса

#html #css

Доброго времени суток !

Есть чекбокс, стилизован посредством label.

При наведении на чекбокс он один раз моргает, после его активации тоже один раз моргает,
в чем проблема ?




.checkbox {
  cursor: pointer
}

.checkbox:before {
  display: block;
  cursor: pointer;
  content: '';
  float: left;
  background: url(/img/svg/check_box_before.svg);
  margin: 0 7px 0 0;
  width: 15px;
  height: 15px
}

.checkbox:hover:before {
  background-image: url(/img/svg/check_box_hover.svg)
}

.checkbox.on:before {
  background-image: url(/img/svg/checkbox_before.svg)
}

.checkbox.on:hover:before {
  background-image: url(/img/svg/checkbox_hover.svg)
}

анонимно



    

Ответы

Ответ 1

Как убрать моргание чекбокса ?



Пошарив на английском стаке нашел аналогичный вопрос.

Решение проблемы просто, нужно просто предзагружать SVG.

CSS:

body:after{
 display:none;
 content: url(/путь_до_файла/файл.svg);
}