<label class="label__kids" for="1.1">
<input name="kids" class="input__kids" type="checkbox" name="1" id="1.1">
</label>.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;
}
.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 
.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);
}
Средний
Простой
