在 Google Chrome 中,单选按钮会在圆圈周围显示不需要的白色背景。这在 Firefox 中并未按预期显示。
Please check these images.
她是有问题的页面的直接链接(在 Firefox 和 Chrome 中检查)https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4 https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4
有什么 CSS 技巧可以应用于 Chrome 吗?
这是一个known http://code.google.com/p/chromium/issues/detail?id=119698Chrome 中的错误没有真正的解决方法。
我目前看到和使用的唯一选项是使用带有复选框图像的精灵表。我做了一个小提琴,用我在互联网上找到的一些随机精灵向您展示它:
解决方法 http://jsfiddle.net/hannesmolsen/pSfeP/1/
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
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)