如何设计一个单选按钮？

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，它不是跨浏览器兼容的，我建议你保持简单一些，但这取决于你的个人选择和使用案例