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

我试图制作自己的单选按钮样式.一切都在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;
}

哪里不对？

非常感谢您的回答.

解决方法

试试这个： jsfiddle

你需要做的是隐藏单选按钮,只使用标签来切换它.所以,我将input [type =“radio”]设置为display：none,并将一些CSS移动到标签选择器或按钮的新选择器,我给了类’按钮’：

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/进行样式化输入的一个很好的演练

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

解决方法

相关文章