styling radio button with css doesn't work - html

Question

i'm trying to style a radio button using just css, but i can't figure out why it does not work:
HTML
<input type="radio">
CSS
input[type="radio"]{
background: green;
}
http://jsfiddle.net/vNmLe/

Answer 1

Radio buttons, checkboxes and selects can't be styled very well in a cross-browser fashion using only CSS. You'll need some extra markup and a little javascript.
One technique is to wrap the input inside a div and set the input's opacity to 0. You position the input inside of the wrapping div so that it fills the entire space.
HTML:
<div class="faux-radio" data-group="radio-test">
<input type="radio" id="radio-1" name="radio-test">
</div>
CSS:
input[type="radio"] {
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
z-index: 5;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-moz-opacity: 0;
opacity: 0;
}
.faux-radio {
width: 12px;
height: 12px;
background: #f2f2f2;
border: 1px solid #a6a6a6;
border-radius: 12px;
display: inline-block;
margin-right: 2px;
position: relative;
}
.faux-radio.selected:after {
content: '';
width: 6px;
height: 6px;
background: #666;
border-radius: 6px;
position: absolute;
top: 2px;
left: 2px;
}
label {
margin-right: 20px;
}
With this technique you get your own style and still get all of the standard input behavior. But you have extra markup for every form element. And you'll need to add some javascript to provide the visual feedback users expect when clicking form elemens.
Here's a quick radio button example with js included: http://jsfiddle.net/xevw3/17/