Question

I have this HTML:

<input type="radio">
<span class="label">
    <label id="options_34537_2label" for="options_34537_2">
</label>
</span>

Now I also have some CSS, which hides the radio button itself and puts an image in front of my label.

input[type="radio"] {
    display: none;
}

label:before {
    background: url("someimage.jpg") no-repeat scroll 0 0 transparent;
}

In IE and FF I can click the image to select the option, in Chrome, clicking does not work at all. Any idea how to solve this issue?

Thanks!

Answer 1

You should put the <input> inside the <label> to make it cliquable:

<label><input type="radio"></label>

And use the background property on your label directly, instead of using the :before pseudo-class. Then add some text or specify a width to show your background.