jquery - 单选按钮的 Moz 外观显示 radio 静止

Question

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

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

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

Answer 1

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

解决方法是隐藏单选按钮本身并使用 :before类似于 <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>输入 checkbox这样一次可以检查多个输入。这样，当有人选择评级时，所有先前的星都被加星标(即，检查第三颗星也会检查第一颗和第二颗星)。但这只是一个建议。

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

很多代码信用转到以下链接: http://www.hongkiat.com/blog/css3-checkbox-radio/