IE8 / IE7 中的自定义复选框

Question

I'm trying to create custom checkboxes for my website and it works fine with >IE9 and other browsers. But it doesn't work as expected in IE8 or 7. Here is my CSS

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>

It works fine in latest browsers and I downloaded selectivizr.js for fallback to :checked pseudo selectors to work in IE8 / 7 but the problem is that when I click on the checkbox, nothing seems to be happening to the state of the checkbox and even the onclick event is not getting captured. Any help would be greatly appreciated.

Answer 1

Like Nash3man said it could be a z-index issue. Personnaly for cross-browser custom checkboxes i use this plugin jquery: http://fronteed.com/iCheck/

Answer 2

Good chance this will work. I created them in two hours. Tell me if it works. I haven't tested them in ie because I don't have an old version of ie available.

Radio buttons: https://plus.url.google.com/url?q=https://jsfiddle.net/www139/ba5jn2e6/19&rct=j&ust=1438272911487000&usg=AFQjCNGbnoaoAsY0eXLb8k0YBrO3wswiNQ

Checkboxes: https://plus.url.google.com/url?q=https://jsfiddle.net/www139/wpq6qjyf/76/&rct=j&ust=1438273369508000&usg=AFQjCNG4Tfz0XYteFZAz8Q53OXSevujfNg