【问题标题】:Moz appearance for radio button shows radio still单选按钮的 Moz 外观仍显示收音机
【发布时间】:2013-05-18 01:35:26
【问题描述】:

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

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

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

【问题讨论】:

    标签: jquery css webkit radio mozilla


    【解决方案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";
    }
    

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

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

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

    【讨论】:

    • 请让您的帖子独立并总结您答案中的链接。您可以保留答案中的链接,但万一链接失效,它会防止您的答案降级为无用的答案。
    猜你喜欢
    • 1970-01-01
    • 2014-07-17
    • 2021-09-28
    • 1970-01-01
    • 2011-11-10
    • 2013-10-25
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多