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

Answer 2

The label elements in your HTML have the wrong value in their for attributes.
Each label must have a for attribute value exactly matching the id of the checkbox it is meant to activate.

Answer 3

The for attribute on your label needs to match the id of your input. This is working for me:

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

Answer 4

Try this code

<label>                        
   <input type="checkbox" class="input-checkbox" id="checkbox1" />
   <span class="input-label">Your Label</span>
</label>

Answer 5

you have to change your label for id here is working fiddle i have change your this line

<label for="checkbox2" class="input-label"></label>

http://jsfiddle.net/jUa3P/146/