Question

Hi i have this html code:

<input type="checkbox" id="button2">
<label for="button2">something here</label>

So the idea is when I click on the label, the checkbox is going to be activated. Now if I add this css

label:before{
  content:'some content';
...
}

of course I know that there is no reason to add that through css but just a simplified example, to help me explain myself.

Now I want to be able to click on ‘some content’ generated will css and I want it to have the same effect as the label. So when I click on ‘some content’ the checkbox would be activated. Can that be done

Thanks

Answer 1

This does work in all browsers (Fx, IE, Opera) for exception of Chrome and Safari. It’s apparently a WebKit-specific bug.

But the bug can be worked around by specifying display: inline-block or display: block (depending on what is more appropriate in your specific case) for LABEL.