问题描述
我尝试制作自己风格的单选按钮.在 Chrome 中一切正常，但在 IE 和 Firefox 中仍然存在一些显示错误.
I have tried to make own style of radio button. Everything works well in Chrome, but in IE and Firefox there are still some display errors.
代码如下:
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 移动到 label 选择器或按钮的新选择器，我给了类按钮":
What you need to do is hide the radio button and only use the label for toggling it. So, I set input[type="radio"] to display:none, and moved some of the CSS to the label selector or a new selector for the button, to which I gave the class '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/
Here's a good walk through of stylizing inputs with CSS: http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/
这篇关于样式单选按钮 - 在 IE 和 Firefox 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！