<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