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

Question

在Google Chrome中，单选按钮会在圆圈周围显示不需要的白色背景。这不会在Firefox中按预期显示。

请检查这些图像。

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

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

Answer 1

这是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

Answer 2

将无线电元素包装在div中，并将div的溢出设置为隐藏，并将border-radius设置为100px。然后将无线电输入设置为显示块，没有边距。这对我有用：

标记：

<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

我知道这是一个老线程，但是我遇到了同样的问题，我花了一段时间才弄明白，所以如果其他人遇到同样的问题我会发布这个问题。 我非常偶然地想出来了。我正在查看其他内容并使用ctrl和scroll放大页面，并看到单选按钮不再具有白色背景（并且看起来更好）。所以我只是说：

zoom: 0.999;

在正确的css课程中，并为我修复了它。