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

Question

In Google Chrome, radio buttons show a unwanted white background around the circle. This is not shown in Firefox as intended.

Please check these images.

And her is the direct link of the page having the issue (check in Firefox and Chrome) https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4

Any CSS tricks that I can apply for Chrome?

Answer 1

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

Answer 2

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;
}

Answer 3

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.