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!

Josh Crozier · Accepted Answer · 2014-01-22 00:21:51Z

25

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

answered Jan 22, 2014 at 0:21

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

awongCM Over a year ago

Wow, that was quick response! And I just fixed it - ha! That explains why I'm supposed to get this label elements and input elements to match. I ignored that part, never realising this is what I'm supposed to use in the first place. Thanks all! :)

RyanJohnstone Over a year ago

I'm having this issue but this isn't the reason why, I have a feeling it's because I'm using handlebars to generate a template client side which contains the checkboxes. This only happens on smaller screen sizes, at larger sizes where the it isn't using the client side template it works fine. Would appreciate any insight...

Bunabyte Over a year ago

Note that your "working" example does not actually work on Firefox 130 (macOS 14.3.1). I don't think Firefox supports :clicked. Is there another solution?

Emma Leis · Accepted Answer · 2014-01-22 00:22:27Z

1

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.

answered Jan 22, 2014 at 0:22

Emma Leis

2,9206 gold badges28 silver badges43 bronze badges

Comments

Neil Palmer · Accepted Answer · 2014-01-22 00:23:08Z

1

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>

answered Jan 22, 2014 at 0:23

Neil Palmer

663 bronze badges

Comments

Jigar Prajapati · Accepted Answer · 2020-04-09 07:50:20Z

0

Try this code

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

answered Apr 9, 2020 at 7:50

Jigar Prajapati

1011 silver badge4 bronze badges

Comments

jitendra varshney · Accepted Answer · 2016-06-01 11:50:18Z

-2

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/

answered Jun 1, 2016 at 11:50

jitendra varshney

3,5622 gold badges26 silver badges32 bronze badges

Collectives™ on Stack Overflow

CSS styling checkbox when checked - not working

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related