單選按鈕作爲圖像

Question

試圖找到一個簡單的解決方案，讓我的單選按鈕在選擇頁面上顯示爲圖像，而不是基本的圓形的東西。

下面是輸出各radio按鈕的代碼：

foreach ($context['icons'] as $icon) 
echo '<input type="radio" name="icon" value="', $icon['value'], '"', $icon['value'] == $context['icon'] ? ' checked="checked"' : '', ' /><img src="', $icon['url'], '" alt="', $icon['name'], '" title="', $icon['name'], '" />'; 

電流輸出顯示每個圖像一邊的單選按鈕，這是不期望的結果：

正如你可以告訴，這是一個論壇（簡單機器），我還沒有找到一個解決方案或體面的幫助。我追求的東西很容易實現，並且很可能以jQuery爲導向。

如果你能幫助，我將不勝感激。

Answer 1

檢查這個shniz出

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/

我認爲這將幫助你

或

HTML

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> 

CSS

input[type=checkbox] { 
    display:none; 
    } 

    input[type=checkbox] + label 
    { 
     background: #999; 
     height: 16px; 
     width: 16px; 
     display:inline-block; 
     padding: 0 0 0 0px; 
    } 

    input[type=checkbox]:checked + label 
    { 
     background: #0080FF; 
     height: 16px; 
     width: 16px; 
     display:inline-block; 
     padding: 0 0 0 0px; 
    }