如何在Mac上设置单选按钮的样式？

Question

如何使用css将我的单选按钮设置为像Mac上那样？  

Answer 1

一些有趣的东西

如果我们正在讨论网页 - 而不是关心浏览器支持......那么你可以用CSS做一些令人兴奋的事情：

• box-shadow
• -webkit-和-moz-appearance
• input[type="radio"]:active:before或:after
• border-radius
• :checked

DEMO - 指出：仅适用于某些浏览器！

你可以用一些radial-gradient和其他奇特的东西来疯狂。

通过一些工作，您可能会想到在大多数较新的浏览器上显示类似的东西，但我只是想指出那里有一些方法。

有时可能会成为一个跨浏览器的标准; - ）

Answer 2

您不能设置无线电按钮的样式。然而，你可以做的是使用javascript隐藏实际的radiobutton并将其替换为可点击的span或div并更改实际隐藏的radiobutton的checked属性。 然后，您可以使用css设置span或div的样式。

Answer 3

您可以按照自己喜欢的方式设置样式，并且仍然可以通过以下教程和示例访问： Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery)

注意按钮是如何仍然显示在屏幕上的（没有display: none因此屏幕阅读器对表格没有任何问题）但是图像（精灵）位于每个按钮之上，所以我们看不到香草按钮了。您可以通过在Firebug中使用绝对定位元素的左侧和顶部值来查看技巧。

或者您也可以遵循@meagar的明智建议

Answer 4

你可以用CSS3来实现这个目标。不可能，你不能!!

http://experiments.wemakesites.net/custom-css3-checkboxes-and-radios.html