<label>
                        <input type="checkbox">
                        <label>
                            <span></span><i>template</i><em class="rf">
                                (4)
                        </em>                        </label>
                    </label>

<style>

.abtarea label{ display:block; font-size:13px; line-height:25px;  color:#000; margin-left:4px; }
.abtarea .rf {   color: #8e8e8c; float: right; text-align: right; width: 40px; margin-right:10px;  }
.slp input[type="checkbox"] {
    display:none;
}
.slp input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
.slp input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

</style>

i don’t know why they are not working on chrome

Your problem is that you have set "display:none" on your checkbox. If you set it to display none, how will a user interact with it? 

You could try setting the opacity of the checkbox to 0.

Take a look at this: http://jsfiddle.net/9q59L8yo/

It kind of works but should point you in the right direction.

Thanks For Your Time