Радио фоновой картинки кнопки

Question

Я дал bg изображение для переключателя. Он работает в хроме, но не в мозилле.

Вот мой код

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

CSS является

.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

Написать так:

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> 

Прочитайте эту статью для более http://css-tricks.com/the-checkbox-hack/

Answer 2

вы хотите что-то вроде этого http://jsfiddle.net/surendraVsingh/UmpdH/5/ (нажмите на иконку колокола)

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

});​