I am currently in the process of implementing custom checkboxes for my website. Everything is functioning smoothly on browsers such as IE9 and other modern ones. However, I am encountering issues with IE8 and 7. Below is a snippet of my CSS code:
input[type="checkbox"] + label span {
height: 13px;
width:13px;
display: inline-block;
cursor: pointer;
background: url("../img/icons.png") no-repeat;
vertical-align: text-top;
margin-right: 6px;
background-position: -57px -118px;
}
input[type="checkbox"]:checked + label span{
background-position: -70px -106px;
}
<input type="checkbox" id="chkbox1" value="1" onclick="alert('clicked');">
<label for="chkbox1"><span></span>Checkbox1</label>
The issue arises when trying to interact with the checkbox in IE8 or 7. Despite using selectivizr.js to enable support for the :checked pseudo selectors, the checkbox does not change its state upon being clicked. Additionally, the onclick event does not seem to be detected. Any insights on resolving this problem would be greatly appreciated.