CODEWITHSUNDEEP
htmlcsscheckbox
awongCM
awongCM

Reputation: 927

CSS styling checkbox when checked - not working

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!

Upvotes: 7

Views: 32496

Answers (5)

Jigar Prajapati
Jigar Prajapati

Reputation: 91

Try this code 

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

Upvotes: 0

jitendra varshney
jitendra varshney

Reputation: 3562

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/

Upvotes: -2

Neil Palmer
Neil Palmer

Reputation: 66

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>

Upvotes: 1

Emma Leis
Emma Leis

Reputation: 2900

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.

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240878

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

Upvotes: 25

Related Questions