Imagen de fondo del botón de radio

Question

He dado la imagen de bg para el botón de opción. Está funcionando en cromo pero no en mozilla.

Aquí está mi código

<div class="fieldlist"> 
    <label for="shipadd2"> 
    <input type="radio" id="shipadd2" name="address" /> 
    <div class="compacttext"> Lorem ipsum </div> 
    </label> 
    </div> 

CSS es

.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

escribe así:

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> 

Lee este artículo para obtener más http://css-tricks.com/the-checkbox-hack/

Answer 2

¿Quieres algo como esto http://jsfiddle.net/surendraVsingh/UmpdH/5/ (haga clic en el icono de campana)

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'); 
    } 

});​