Mam cos takiego:
label { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input[type=checkbox].css-checkbox { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0; } input[type=checkbox].css-checkbox + label.css-label { padding-left:20px; height:20px; display:inline-block; line-height:15px; background-repeat:no-repeat; background-position: 0 0; font-size:15px; vertical-align:middle; cursor:pointer; float: right; } input[type=checkbox].css-checkbox:checked + label.css-label { background-image:url(../img/hover-checked.png); } .css-label{ background-image:url(../img/checkbox.png); } <input type="checkbox" class="css-checkbox" id="checkbox1"> <label for="checkbox1" name="checkbox1_lbl" class="css-label lite-green-check"></label>