CSS styling checkbox when checked - not working

Question

I have the following static html file, where I'm spending time building a CMS web application site for our client.

http://cms.tmadev.com.au/usergroup.html

In middle section, there's a vertical array of checkboxes (which I css-styled it) and I followed numerous online tutorials, which lead me to use this site link.

http://csscheckbox.com/

I download the source code tutorial, understood it, copied the css code, tailor my changes as per my client requirements.

Everything looks perfectly fine - except when trying to check the checkbox.

NOTHING HAPPENS!

The checkbox doesn't get checked when clicked!

I couldn't figure out why it's not working as it's supposed to be like the tutorial.

Can someone please tell me what I did wrong?

Here's my code.

input[type=checkbox].input-checkbox{
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
    clip: rect(0,0,0,0);
    margin: -1px;
    padding: 0;
    border: 0;
}


input[type=checkbox].input-checkbox + label.input-label{
    border: 2px solid #58585A;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 15px;
    background-repeat: no-repeat;
    font-size:15px;
    vertical-align: middle;
    cursor: pointer;
}

input[type=checkbox].input-checkbox:checked + label.input-label{
    background-position: 0 -20px;   
}

.input-label{
    background-image: url('/images/tickbox.png');
}

Thanks very much!

Answer 1

The CSS is fine. Your problem is matching the label elements with the input elements.

This method relies on the fact that clicking the label toggles the checkbox. If the label isn't attatched to the checkbox it won't work. Match the value of each label's for attribute to the id of each checkbox.

For example:

<input type="checkbox" class="input-checkbox" id="checkbox1">
<label for="checkbox1" class="input-label"></label>

LIVE EXAMPLE HERE