jquerycssradio-buttonwebkitmozilla

Moz appearance for radio button shows radio still


I'm using -webkit-appearance and -moz-appearance so that I can style my radio buttons differently. When I do this in Chrome I get what I want:

enter image description here

When I use -moz-appearance for Firefox browsers, it does change but not exactly...

enter image description here

The radio button is still there! Is there a way to get rid of it completely and show my background images??


Solution

  • the -moz-appearance property is still a bit buggy it seems: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

    A workaround would be to hide the radio buttons themselves and use the :before pseudo element on something like a <label> to display different things depending on if the input is checked or not:

    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";
    }
    

    for your application relating to a rating system, since you want the stars to indicate a rating you may want to consider switching the <input> type to a checkbox so that more than one input can be checked at one time. This way, all of the previous stars are starred when someone selects a rating (i.e., checking the third star also checks the first and second star). But that's just a suggestion.

    jsfiddle of what I'm talking about: http://jsfiddle.net/4Dm3g/1/

    a lot of code credit goes to the following link: http://www.hongkiat.com/blog/css3-checkbox-radio/