Radio button background image - html

Question

I have given bg image for radio button. It is working in chrome but not in mozilla.
Here is my code
<div class="fieldlist">
<label for="shipadd2">
<input type="radio" id="shipadd2" name="address" />
<div class="compacttext"> Lorem ipsum </div>
</label>
</div>
CSS is
.fieldlist input[type="radio"] {
float: right;
-webkit-appearance: none;
border: none;
width: 25px;
height: 25px;
background: url(images/radio.png) left center no-repeat;
background-size: 20px;
}
.fieldlist input[type="radio"]:checked {
background: url(images/radio_checked.png) left center no-repeat;
}

Answer 1

Write like this:
CSS:
input[type="radio"]{
display:none;
}
input[type="radio"] + label
{
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type="radio"]:checked + label
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
HTML
<input type="radio" id="shipadd2" name="address" />
<label for="shipadd2"></label>
Read this article for more http://css-tricks.com/the-checkbox-hack/

Answer 2

Do you want something like this http://jsfiddle.net/surendraVsingh/UmpdH/5/ (click on the bell icon)
CSS
label{
display:block;
background: url(https://dl.dropbox.com/u/19982181/fab/notify.png) no-repeat;
}
.fieldlist input[type="radio"] {
float: right;
border: none;
opacity:0;
width: 25px;
height: 25px;
display:block;
float:left;
border:1px solid #333;
background-size: 20px;
}
Jquery:
$("#shipadd2").click(function(){
if($(this).is(":checked")){
$(this).parent().css('background-position', '0 -29px');
}
else{
$(this).parent().css('background-position', '0 0');
}
});​
​

Answer 3

Try this it worked for me
-moz-appearance: none;
Thanks