如何用圖像替換替換單選按鈕？

Question

我想，而不是標準的單選按鈕，爲每個單選按鈕使用不同的圖像。對於選定的狀態，我希望邊框在圖像周圍出現。

我已經嘗試製作單選按鈕的圖像標籤，然後隱藏按鈕，但似乎打破了功能出於某種原因。

我也遇到了這篇文章：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/，我可能以某種方式扭曲我的目的。

有沒有更簡單/更好的方法？

Answer 1

• DEMO：http://so.devilmaycode.it/is-there-an-easy-way-to-replace-radio-button-with-images-and-a-colored-border-fo/

的jQuery

 $('input:radio').hide().each(function() { 
      $(this).attr('data-radio-fx', this.name); 
      var label = $("label[for=" + '"' + this.id + '"' + "]").text(); 
      $('<a ' + (label != '' ? 'title=" ' + label + ' "' : '') + ' data-radio-fx="'+this.name+'" class="radio-fx" href="#">'+ 
       '<span class="radio' + (this.checked ? ' radio-checked' : '') + '"></span></a>').insertAfter(this); 
     }); 
     $('a.radio-fx').on('click', function(e) { 
      e.preventDefault(); 
      var unique = $(this).attr('data-radio-fx'); 
      $("a[data-radio-fx='"+unique+"'] span").attr('class','radio'); 
      $(":radio[data-radio-fx='"+unique+"']").attr('checked',false); 
      $(this).find('span').attr('class','radio-checked'); 
      $(this).prev('input:radio').attr('checked',true); 
     }).on('keydown', function(e) { 
      if ((e.keyCode ? e.keyCode : e.which) == 32) { 
       $(this).trigger('click'); 
      } 
     }); 

在演示源
• 全碼;

Answer 2

我認爲你不會找到比你添加到問題中的鏈接更簡單的方法。這是我知道的唯一途徑。我認爲你有效地回答了你自己的問題。沒有這個或那個東西的徽章？

而且，類似的問題在這裏回答：Styling checkboxes, radio buttons and dropdowns

它包含幾個預先構建的解決方案，你可以看看。如果沒有更多關於你想要在視覺上完成什麼的信息，我不能說它們中的任何一個會爲你工作。

祝你好運！

Answer 3

我只有一小會兒前有同樣的問題，發現這個jQuery的解決方案，它完美的作品，並很好地降低：

http://www.adamcoulombe.info/lab/jquery/select-box/

我用它來定製樣式選擇下拉菜單。這很容易實現。例如，將目標類別爲$('.mySelectBoxClass')的變量替換爲$('select') - 這將針對您網頁上的所有選定元素。同樣的規則適用於單選按鈕。

Answer 4

我還沒有研究，但是，這個聽起來前途： http://www.thecssninja.com/css/custom-inputs-using-css

Answer 5

我提出了兩種不同的解決方案：

CSS SOLUTION:

/* 
    Hide radio button (the round disc) 
    we will use just the label to create push button effect 
*/ 
input[type=radio] { 
    display:none; 
    margin:10px; 
} 

/* 
    Change the look'n'feel of labels (which are adjacent to radio buttons). 
    Add some margin, padding to label 
*/ 
input[type=radio] + label { 
    display:inline-block; 
    margin:-2px; 
    padding: 4px 12px; 
    background-color: #e7e7e7; 
    border-color: #ddd; 
} 
/* 
Change background color for label next to checked radio button 
to make it look like highlighted button 
*/ 
input[type=radio]:checked + label { 
    background-image: none; 
    background-color:#d0d0d0; 
} 

與HTML

<input type="radio" id="radio1" name="radios" value="all" checked> 
    <label for="radio1">iPhone</label> 
<input type="radio" id="radio2" name="radios"value="false"> 
    <label for="radio2">Galaxy S IV</label> 
<input type="radio" id="radio3" name="radios" value="true"> 
    <label for="radio3">Nexus S</label> 

JAVASCRIPT SOLUTION

Demo Here

Answer 6

是的，有！這是簡單的方法的例子：

無需JavaScript的

CSS

.radio_item{ 
display: none !important; 
} 

.label_item { 
opacity: 0.1; 
} 

.radio_item:checked + label { 
opacity: 1; 
} 

HTML

<!--RADIO 1--> 
<input type="radio" class="radio_item" value="" name="item" id="radio1"> 
<label class="label_item" for="radio1"> <img src="img_url_here"> </label> 

<!--RADIO 2--> 
<input type="radio" class="radio_item" value="" name="item" id="radio2"> 
<label class="label_item" for="radio2"> <img src="img_url_here"> </label> 

FIDDLE

Answer 7

aSeptik解決方案存在一個錯誤，如果您單擊一個選中的單選按鈕，它將取消選中它。我通過下面的調整來糾正它。

$('a.radio-fx').on('click', function(e) { 
     e.preventDefault(); 
     if($(this).prev('input:radio').is(':checked')) return; 
     ... 

所以......

$('input:radio').hide().each(function() { 
     $(this).attr('data-radio-fx', this.name); 
     var label = $("label[for=" + '"' + this.id + '"' + "]").text(); 
     $('<a ' + (label != '' ? 'title=" ' + label + ' "' : '') + ' data-radio-fx="'+this.name+'" class="radio-fx" href="#">'+ 
      '<span class="radio' + (this.checked ? ' radio-checked' : '') + '"></span></a>').insertAfter(this); 
    }); 
    $('a.radio-fx').on('click', function(e) { 
     e.preventDefault(); 
     if($(this).prev('input:radio').is(':checked')) return; 
     var unique = $(this).attr('data-radio-fx'); 
     $("a[data-radio-fx='"+unique+"'] span").attr('class','radio'); 
     $(":radio[data-radio-fx='"+unique+"']").attr('checked',false); 
     $(this).find('span').attr('class','radio-checked'); 
     $(this).prev('input:radio').attr('checked',true); 
    }).on('keydown', function(e) { 
     if ((e.keyCode ? e.keyCode : e.which) == 32) { 
      $(this).trigger('click'); 
     } 
    }); 

謝謝aSeptik了很好的解決方案！

Answer 8

非常簡單的解決方案，我在網上找到。

http://jsbin.com/image-instead-of-radio-button/3/edit?html,css,output