怎麼修改單選框radio默認樣式

jQuery 實現下這個效果，所以不必定是最佳方案，背景圖直接從網上找到。:)
先把 HTML 碼好：

<div>
  <input type="radio" id="nba" checked="checked" name="sport" value="nba">
  <label name="nba" class="checked" for="nba">NBA</label>
  <input type="radio" id="cba" name="sport" value="cba">
  <label name="cba" for="cba">CBA</label></div>

接着是 CSS:

input[type="radio"] {  margin: 3px 3px 0px 5px;  display: none;}label {  padding-left: 20px;  cursor: pointer;  background: url(bg.gif) no-repeat left top;}label.checked {  background-position: left bottom;}

再就是 jQuery 代碼了：

$(function() {
  $('label').click(function(){    var radioId = $(this).attr('name');
    $('label').removeAttr('class') && $(this).attr('class', 'checked');
    $('input[type="radio"]').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked');
  });
});

效果以下：

點擊 CBA 後：

背景圖 bg.gif 一併上傳以下：

剛看到你的問題中還有一個取得選中的單選按鈕的值，這個不難取得：

$('input[type="radio"]:checked').attr('value')

• 連接

•  

• 10 評論

•  

• 更多

答案對人有幫助，有參考價值1答案沒幫助，是錯誤的答案，答非所問

Jesse_Liang 12 6月4日 回答

@bill  的答案也是目前我項目里正在用的方案，自定義radio及checkbox的樣式。
能夠用純css實現樣式而不須要圖片。
詳細見這裏
修改radio和checkbox的默認樣式

答案沒幫助，是錯誤的答案，答非所問

bill 138 5月27日 回答

參考Semantic UI的方案
http://zh.semantic-ui.com/modules/checkbox.html