CODEWITHSUNDEEP
cssgoogle-chrome
user1856596
user1856596

Reputation: 7233

Input type="radio" and hidden radio button - problems in chrome?

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!

Upvotes: 0

Views: 4108

Answers (1)

jgthms
jgthms

Reputation: 864

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.

Upvotes: 2

Related Questions