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?

Valenzuela

#9839083 – Leroy

I saw that question but there was no solution – Valenzuela

I don't see the background issue in Chrome - is this resolved? – Reformatory

A solution would be to use custom inputs – Holeandcorner

zenkaty, the issue is still there. What version of chrome are you using? Mine is 21.0 – Valenzuela

Did you resolve this? The radio buttons in your link look fine in Chrome. – Siddons

no it still exists. I have to now revert to white backgrounds or place the radio button in a white background box – Valenzuela

Same issue here (Google Chrome 28). – Loving

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

Stringboard

Oh, and if you want to use that only for chrome browsers, this post seems very helpful: #2448011 – Stringboard

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

Rosaniline

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.

Faliscan