如何設計一個單選按鈕？

Question

我根本就找不到任何說明如何風格像DIV一個單選按鈕，在我的例子在這裏：http://jsfiddle.net/Q5SRe/

股利：

div { 
    width:50px; 
    height:50px; 
    background-color:green 
} 

我也想被選中的單選按鈕時，它具有：

border: medium solid #000; 

Answer 1

單選按鈕是Shadow DOM，其作爲尚未不能普遍跨瀏覽器樣式的一部分。

目前獲得定製單選按鈕，最好的辦法是使用圖像或checkbox hack。

但如果你只是希望給它一個綠色的邊框，你也可以使用pseudoelements，這可能會是這個樣子：

input[type=radio]:after { 
    display: block; 
    width: 100%; 
    height: 100%; 
    border: 1px solid green; 
    content: ""; 
} 

如果你想要一個邊界是圓的，你可以使用border-radius。我沒有在這方面付出太多的努力，但我相信不會花費太多精力來做出更精確的描述。 Check it out.

如果只想當它檢查其申請，this would do just that。

請注意，邊界半徑和僞元素對瀏覽器的要求非常嚴格，所以如果您希望用戶使用古老版本的IE，最好使用圖片或複選框。

Answer 2

我以前用過this，它不是跨瀏覽器兼容的，我建議你保持簡單一些，但這取決於你的個人選擇和使用案例