djonA,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
[type="checkbox"]{
display: none;
}
label:before{
content: '';
background-position: 0 0;
width:19px;
height:25px;
margin-right: 5px;
background:url('http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/checkbox.png') no-repeat;
display: inline-block;
clear:left;
float:left;
}
label{
height:25px;
display:block;
}
label.styled:before{
background-position: 0px -50px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll('[type="checkbox"]'), function(item) {
item.parentNode.classList[item.checked ? 'add' : 'remove']('styled');
item.addEventListener('change', function() {
item.parentNode.classList[item.checked ? 'add' : 'remove']('styled');
});
});
});
</script>
</head>
<body>
<label for="1"><input type="checkbox" id="1" class="styled" /> test1</label>
<label for="2"><input type="checkbox" id="2" class="styled" checked="checked"/> test2</label>
</body>
</html>