Уже есть небольшая памятка о том как стилизовать checkbox спрайтами, но я решил продемонстрировать вариант, когда поле ввода находиться внутри "этикетки" (тега label).
Оформление checkbox'а внутри label
07.12.2021
.demo2 { user-select: none; position: relative; cursor: pointer; } .demo2 .checkbox__input { appearance: none; } .demo2 .checkbox__input::before { content: ''; display: inline-block; margin-right: 13px; width: 13px; height: 13px; background: url('checkbox_sprites.png') -10px -10px; } .demo2 .checkbox__input:checked::before { content: ''; background: url('checkbox_sprites.png') -43px -10px; }
<label class="demo2"> <input type="checkbox" class="checkbox__input"> Фильтр </label>
Демонстрация: