css – 单选按钮在Chrome中显示不需要的白色背景. Firefox很好

在Google Chrome中,单选按钮会在圆圈上显示不需要的白色背景. Firefox未按预期显示.

请检查这些图像.

而她是有问题页面的直接链接(检查Firefox和Chrome)
https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4

任何可以申请Chrome的CSS技巧？

解决方法

这是Chrome的 known错误,没有真正的解决方法.

在这个时间点我看到和使用的唯一选项是使用带有复选框图像的精灵图.我用一个小提琴向我显示一些我在互联网上发现的随机精灵：

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

您可以使用您想要的设计中的单选按钮创建自己的精灵…

希望有帮助,如果您还有其他问题,请通知我.

-Hannes