Hình nền nút radio

Question

Tôi đã cung cấp hình ảnh bg cho nút radio. Nó đang làm việc trong chrome nhưng không phải trong mozilla.

Đây là mã của tôi

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

CSS là

.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

Viết như thế này:

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> 

Đọc bài viết này để biết thêm http://css-tricks.com/the-checkbox-hack/

Answer 2

Bạn có muốn một cái gì đó như thế này http://jsfiddle.net/surendraVsingh/UmpdH/5/ (nhấp vào biểu tượng chuông)

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

});​