Какие проблемы с версткой на CSS . Тут все просто
стили
input[type="checkbox"] + span{background-repeat:no-repeat;
background-position:left top;
display:inline-block;
width:21px;height:35px;
vertical-align:middle;}
input[type="checkbox"] + span{background-image:url(data:image/png;base64, ....картинка... );}
input[type="checkbox"]:checked + span{background-image:url(data:image/png;base64,....картинка...);}
верстка для чекбокса
<label><input name="" type="checkbox" ><span tabindex=целое_число></span> текст пояснение </label>
еще сам чекбокс через стили в дисплай ноне
tab= делает любой элемент выбираемым.
с клавиатуры чекбокс будет менять значение по пробелу.