Styling radio button - not work in IE and Firefox

Question

I have tried to make own style of radio button. Everything works well in Chrome, but in IE and Firefox there are still some display errors.

Here is the code:

HTML

<input type="radio" id ="light" name="choice" value="none""><label for="light">Light me</label>

CSS

input[type="radio"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png') center center no-repeat;
background-size: 2em;
width: 2em;
height: 2em;
cursor: pointer;
vertical-align: middle;
}

What is wrong?

Thanks a lot for answers.

I would advise that you don't so this. It can be a bit of a usability issue. — Kevin Boucher, Nov 28 '12 at 20:38
You can add Safari to the list of the browsers in which that example does not work ;) — cem, Nov 28 '12 at 20:40
Some form elements just can't be styled with reliable consistency across browsers — Lucas, Nov 28 '12 at 20:45
I would suggest you that you use some jquery plugin for that. See this: http://line25.com/articles/jquery-plugins-for-styling-checkbox-radio-buttons — Vucko, Nov 28 '12 at 20:48

bozdoz · Accepted Answer · 2012-11-28T21:02:37.113

Try this out: jsfiddle

What you need to do is hide the radio button and only use the label for toggling it. So, I set input[type="radio"] to display:none, and moved some of the CSS to the label selector or a new selector for the button, to which I gave the class 'button':

HTML:

<input type="radio" id ="light" name="choice" value="none"">
<label for="light">
<span class="button"></span>
Light me
</label>

CSS:

input[type="radio"] {
    display:none;
}
.button {   background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png') center center no-repeat;
    background-size: 2em;
    width: 2em;
    height: 2em;
    float:left;
}
label { 
    cursor: pointer;
    line-height:32px;
}

Here's a good walk through of stylizing inputs with CSS: http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/

The problem about hiding input elements is that they lose their keyboard navigation ability. And that's sad. — emyller, Sep 23 '13 at 03:13
The other problem I've found is some browsers will not show an alert for required hidden elements. — Gauthier, May 10 '16 at 16:30

Styling radio button - not work in IE and Firefox

1 Answers1

Linked