Styling radio button - not work in IE and Firefox
18,608
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/
Author by
Johncze
Updated on August 21, 2022Comments
-
Johncze over 1 year
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.
-
emyller over 10 yearsThe problem about hiding input elements is that they lose their keyboard navigation ability. And that's sad.
-
Gauthier almost 8 yearsThe other problem I've found is some browsers will not show an alert for required hidden elements.