Geek Answers Handbook

CSS styling checkbox on check - not working

I have the following static html file where I spend time creating a CMS web application site for our client.

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

In the middle part there is a vertical array of checkboxes (which I introduced in CSS style), and I have followed numerous online tutorials that force me to use this site link.

http://csscheckbox.com/

I download the source code tutorial, understand it, copy the css code, adapted my changes according to my client requirements.

Everything looks great - except when you are trying to check the box.

NOTHING HAPPENS!

The checkbox is not checked when pressed!

I could not understand why it does not work, since it should be like a textbook.

Can someone please tell me what I did wrong?

Here is 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'); }

Thank you very much!

+6
source share
4 answers

CSS is great. Your problem corresponds to label elements with input elements.

This method is based on the fact that pressing the label button toggles the checkbox. If the label parameter is not checked, it will not work. Match the value of each label for attribute with the id each flag.

For instance:

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

DIRECT EXAMPLE HERE

+19
source

The label elements in your HTML have the wrong value in their for attributes.
Each label must have a for attribute value that exactly matches the id this flag that it should activate.

+1
source

The for attribute on your label should match the id of your input. This works for me:

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

you need to change your shortcut to id the fiddle works here i changed your line

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

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

-1
source

More articles:


All Articles