checkbox styling with custom image. Works with labels

gistfile1.txt

.class_checkbox {
    display:none;
}

.class_checkbox + label:before{
    background:url('/img/checkbox.png') no-repeat;
    width: 42px!important;
    height: 43px!important;
    display:inline-block;
    margin-right: 10px!important;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    content: "";
}

.class_checkbox:checked + label:before{
    background-image: url(/img/checkbox-selected.png);
    background-size: contain!important;
    height: 60px!important;
    background-repeat: no-repeat;
    display:inline-block;
    padding: 0 0 0 0px;
    vertical-align: middle;
    content: "";
}


<div class="input_class_checkbox" >
    <ul>
    <li><input type="checkbox" id="test-316-field_5_1" name="test[]" value="Measuring Services" class="class_checkbox"><label  for="test-316-field_5_1">Measuring Services</label></li>
    <li><input type="checkbox" id="test-316-field_5_2" name="test[]" value="Reporting Services" class="class_checkbox"><label  for="test-316-field_5_2">Reporting Services</label></li>
    <li><input type="checkbox" id="test-316-field_5_3" name="test[]" value="Consulting Services" class="class_checkbox"><label for="test-316-field_5_3">Consulting Services</label></li>
    </ul>
</div>