單選按鈕背景圖片

我給出了單選按鈕的bg圖像。它使用chrome而不是mozilla。單選按鈕背景圖片

這裏是我的代碼

<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; 

}

來源

2012-06-29 Sowmya

請評價烏爾問題和它們標記爲答案，如果它幫助你在你的問題。 – uday

你可以在http://jsfiddle.net中創建一個例子，以便更好地理解 – sandeep

這樣寫：

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/

來源

2012-06-29 06:30:46 sandeep

你想是這樣的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'); 
    } 

});

來源

2012-06-29 07:18:14 SVS

單選按鈕背景圖片

回答

相關問題