Как сделать кастомные checkbox с картинками?

Question

[Станислав Григорьев]

Имеем данный код:

HTML

<label class="label__kids" for="1.1">
<input name="kids" class="input__kids" type="checkbox" name="1" id="1.1">
</label>

CSS

.input__kids{
  display: none;
}
.label__kids{
  position: relative;
  top: -192px;
  left: 320px;
  width: 32px;
  height: 32px;
  background-image: url(/images/svg/chek_it_mobile.svg);
}
.input__kids:checked{
  background-image: url(/images/svg/cheked.svg);
}
.input__kids:checked+.label__kids{
  display:block;
}

Нужно, чтобы после нажатия на checkbox появлялся checked.svg

Answer 1

[Ankhena]

.input__kids:checked + span{
  background-image: url(/images/svg/cheked.svg);
}

<label class="label__kids" for="1.1">
<input name="kids" class="input__kids" type="checkbox" name="1" id="1.1">
<span></span>
</label>

и размеры, понятное дело. Сам инпут скрыть.
Либо
инпут не внутри лейбл, а лейбл после инпут, тогда будетinput:checked + label

Comments

[Ankhena]

gsv_rus и id не надо цифрами

[Станислав Григорьев]

Благодарю!

Answer 2

[Константин]

.input__kids:checked{
  background-image: none;
}
.input__kids:checked:before{
  content:' ';
  width:1em;
  height:1em;
  position:absolute;
  left: -2em;
  top: 0;
  background-image: url(/images/svg/cheked.svg);
}

Общий смысл - делаете чекбокс прозрачным (но не display:none), а в псевдоэлемент before пихаете ваш SVG.