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/

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

1 个答案: