我试图制作自己的单选按钮样式.一切都在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/进行样式化输入的一个很好的演练
