单选按钮的 Moz 外观仍显示收音机

Question

我正在使用-webkit-appearance 和-moz-appearance，以便我可以设置不同的单选按钮样式。当我在Chrome 中执行此操作时，我得到了我想要的：

当我在 Firefox 浏览器中使用 -moz-appearance 时，它确实发生了变化，但不完全是……

单选按钮仍然存在！有没有办法完全摆脱它并显示我的背景图片？？

Answer 1

-moz-appearance 属性似乎仍然有点问题：https://bugzilla.mozilla.org/show_bug.cgi?id=649849

一种解决方法是隐藏单选按钮本身，并在 <label> 之类的东西上使用 :before 伪元素来根据是否检查输入来显示不同的内容：

html:

<div class="radio">  
    <input id="one" type="checkbox" name="stars" value="one"/>
    <label for="one"></label>  

    <input id="two" type="checkbox" name="stars" value="two"/>
    <label for="two"></label>  

    <input id="three" type="checkbox" name="stars" value="three"/>  
    <label for="three"></label>  

    <input id="four" type="checkbox" name="stars" value="four"/>  
    <label for="four"></label>

    <input id="five" type="checkbox" name="stars" value="five"/>  
    <label for="five"></label>  
</div>  

css:

label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin-right: 15px;
    font-size: 16px;
    color:#a8cdc3;
}
input[type=checkbox] {  
    display: none;  
}

label:before {  
    display: inline-block;  
    content:"\2606";
}
input[type=checkbox]:checked + label:before {
    content:"\2605";
}

对于与评级系统相关的应用程序，由于您希望星号表示评级，您可能需要考虑将<input> 类型切换为checkbox，以便一次可以检查多个输入。这样，当有人选择评级时，所有之前的星星都会被加星标（即，检查第三颗星也会检查第一颗和第二颗星）。但这只是一个建议。

jsfiddle 我在说什么： http://jsfiddle.net/4Dm3g/1/

很多代码功劳归于以下链接： http://www.hongkiat.com/blog/css3-checkbox-radio/