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

cssgoogle-chromeradio-button

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.
enter image description here

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?

Best Answer

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

Radiobuttons with sprite

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

Related Topic