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:
When I use -moz-appearance
for Firefox browsers, it does change but not exactly...
The radio button is still there! Is there a way to get rid of it completely and show my background images??
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/