造型單選按鈕 - 在IE和Firefox中不起作用

Question

我試圖讓自己的單選按鈕風格。在Chrome中一切正常，但在IE和Firefox中仍然存在一些顯示錯誤。

下面是代碼：

HTML

<input type="radio" id ="light" name="choice" value="none""><label for="light">Light me</label> 

CSS

input[type="radio"] { 
appearance: none; 
-webkit-appearance: none; 
-moz-appearance: none; 
background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png') center center no-repeat; 
background-size: 2em; 
width: 2em; 
height: 2em; 
cursor: pointer; 
vertical-align: middle; 
}​ 

有什麼不對？

非常感謝您的解答。

Answer 1

嘗試了這一點：jsfiddle

你需要做的是隱藏的單選按鈕，只使用標籤切換它。所以，我設置input[type="radio"]到display:none，以及移動一些CSS到label選擇或按鈕一個新的選擇，而我居然給班上的「按鈕」：

HTML：

<input type="radio" id ="light" name="choice" value="none""> 
<label for="light"> 
<span class="button"></span> 
Light me 
</label>​​​ 

CSS ：

input[type="radio"] { 
    display:none; 
} 
.button { background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png') center center no-repeat; 
    background-size: 2em; 
    width: 2em; 
    height: 2em; 
    float:left; 
} 
label { 
    cursor: pointer; 
    line-height:32px; 
} 
​ 

這裏有一個很好的步行通過風格化的投入與CSS：http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/