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

Question

我试图制作自己风格的单选按钮。在 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;
}​

怎么了？

非常感谢您的回答。

Answer 1

试试这个：jsfiddle

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

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/