input[type=checkbox] {
    display:none;
}

.my_label {
    display: inline-block;
    cursor: pointer;
    font-size: 13px;
    margin-right:15px;
    margin-bottom:8px;
    line-height:18px;
}

.my_label:before {
    content: "";
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align:middle;
    text-align: center;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
    background-image: url("images/checkbox-bg.gif");
}

input[type=checkbox]:checked + .my_label:before {
    background: url("images/checkbox-checked-bg.gif");
    font-size: 15px;
}

<input type="checkbox" id="my_checkbox"> <label for="my_checkbox" class="my_label">

<input class="my_checkbox_class" id="my_checkbox_id" onclick="my_function()">