Checkbox tab index not working when set to hidden with custom design

It's because you have "display:none;" set on the actual checkbox.

If you remove that it works fine: http://jsbin.com/vogoripi/2

If you do want to use another method for styling checkboxes while keeping this functionality you should maybe look at a plugin like: http://uniformjs.com/

I would suggest leaving them as is and just leaving the standard checkbox, as you may run in to problems further down the line.

I changed it from display: none; to opacity: 0; and it works fine here is the new edited code

http://jsbin.com/yuxizazo/1