样式单选按钮 - 在 IE 和 Firefox 中不起作用答案

【问题标题】：Styling radio button - not work in IE and Firefox样式单选按钮 - 在 IE 和 Firefox 中不起作用
【发布时间】：2012-11-16 19:51:06
【问题描述】：

我尝试制作自己风格的单选按钮。在 Chrome 中一切正常，但在 IE 和 Firefox 中仍然存在一些显示错误。

代码如下：

HTML

<input type="radio" id ="light" name="choice" value="none""><label for="light">Light me</label>

CSS

input[type="radio"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png') center center no-repeat;
background-size: 2em;
width: 2em;
height: 2em;
cursor: pointer;
vertical-align: middle;
}

怎么了？

非常感谢您的回答。

【问题讨论】：

我建议你不要这样。这可能是一个可用性问题。
您可以将 Safari 添加到该示例不起作用的浏览器列表中；）
你能解释一下“一些显示错误”是什么意思吗？
某些表单元素的样式无法在不同浏览器之间保持可靠的一致性
我建议你为此使用一些 jquery 插件。看到这个：line25.com/articles/…

标签： css radio-button

【解决方案1】：

试试这个：jsfiddle

您需要做的是隐藏单选按钮并仅使用标签来切换它。所以，我将input[type="radio"] 设置为display:none，并将一些CSS 移动到label 选择器或按钮的新选择器，我将类'button' 赋予了该选择器：

HTML：

<input type="radio" id ="light" name="choice" value="none"">
<label for="light">
<span class="button"></span>
Light me
</label>

CSS：

input[type="radio"] {
    display:none;
}
.button {   background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png') center center no-repeat;
    background-size: 2em;
    width: 2em;
    height: 2em;
    float:left;
}
label { 
    cursor: pointer;
    line-height:32px;
}

以下是使用 CSS 对输入进行样式化的一个很好的演练：http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/

【讨论】：

隐藏输入元素的问题是它们失去了键盘导航能力。这很可悲。
我发现的另一个问题是某些浏览器不会显示所需隐藏元素的警报。