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

Question

我正在使用-webkit-appearance，-moz-appearance以便我可以以不同的方式设置单选按钮的样式。当我这样做时，Chrome我得到了我想要的：

当我-moz-appearance用于 Firefox 浏览器时，它确实发生了变化，但并不完全...

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

Answer 1

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

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

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>类型切换为 a checkbox，以便一次检查多个输入。这样，当有人选择评级时，所有之前的星星都会被加星标（即，选中第三颗星也会选中第一颗和第二颗星）。但这只是一个建议。

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

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