Radio buttons show unwanted white background in Chrome. Firefox is fine

this is a known Bug in Chrome which does not have real workarounds.

The only option I see and use at this point of time is to use a sprite sheet with images of the check boxes. I made a fiddle to show it to you with some random sprite I found on the internet:

Workaround

HTML:

<div id="show">    <input type="radio" id="r1" name="rr" />    <label for="r1"><span></span>Radio Button 1</label><p />    <input type="radio" id="r2" name="rr" />    <label for="r2"><span></span>Radio Button 2</label></div>

CSS:

div#show {    width:100%;    height: 100%;    background:black;    margin: 10px;    padding: 10px;}input[type="radio"] {    /* Uncomment this to only see the working radio button */    /* display:none; */}input[type="radio"] + label {    color:#f2f2f2;    font-family:Arial, sans-serif;    font-size:14px;}input[type="radio"] + label span {    display:inline-block;    width:19px;    height:19px;    margin:-1px 4px 0 0;    vertical-align:middle;    background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -38px top no-repeat;    cursor:pointer;}input[type="radio"]:checked + label span {    background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -57px top no-repeat;}

You could create your own sprite with radio buttons in your desired design...

Hope that helps, if you have any more questions, let me know.

-Hannes

Wrap the radio element in a div, and set that div's overflow to hidden, and border-radius to 100px. Then set the radio input to display block, and no margin. This worked for me:

Markup:

<div class="radio_contain">    <input type="radio" id="r1" name="r1"></div>

CSS:

.radio_contain {  display: inline-block;  border-radius: 100px;  overflow: hidden;  padding: 0;}.radio_contain input[type="radio"] {  display: block;  margin: 0;}

I know this is an old thread, but I had this same problem and it took me a while to figure it out, so I'm posting this if someone else has the same problem. I figured it out quite accidentally really. I was looking at something else and zoomed in on page using ctrl and scroll, and saw that radio button didn't have white background any more (and looked better). So I just put:

zoom: 0.999;

in right css class and that fixed it for me.