在 Google Chrome 中，单选按钮会在圆圈周围显示不需要的白色背景。这未按预期在 Firefox 中显示。
请检查这些图片。
她是有问题的页面的直接链接（在 Firefox 和 Chrome 中检查） https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4
我可以为 Chrome 应用任何 CSS 技巧吗？
【问题讨论】：
标签： css google-chrome radio-button
这是 Chrome 中的 known 错误，没有真正的解决方法。
此时我看到和使用的唯一选项是使用带有复选框图像的精灵表。我做了一个小提琴，用我在互联网上找到的一些随机精灵展示给你看：
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;
}
您可以在您想要的设计中使用单选按钮创建自己的精灵...
希望对您有所帮助，如果您还有其他问题，请告诉我。
-汉尼斯
【讨论】：
将 radio 元素包裹在一个 div 中，并将该 div 的溢出设置为隐藏，并将边框半径设置为 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;
}
【讨论】：
我知道这是一个旧线程，但我遇到了同样的问题，我花了一段时间才弄清楚，所以如果其他人有同样的问题，我会发布这个。 我真的很意外地想通了。我正在查看其他内容并使用 ctrl 和滚动放大页面，并看到该单选按钮不再具有白色背景（并且看起来更好）。所以我只是说：
zoom: 0.999;
在正确的 css 类中，这为我修复了它。
【讨论】：