css - 如何像在 mac 上一样设置我的单选按钮的样式？

Question

如何像这样使用 css 设置我的单选按钮的样式，使其看起来像 mac 上的单选按钮？在此处输入图像描述

score 2 · Accepted Answer

一些有趣的东西

如果我们谈论的是网页——而不是太关心浏览器的支持......有一些令人兴奋的事情你可以用 CSS 做：

演示- 注意：仅适用于某些浏览器！

你甚至可以更疯狂地使用一些radial-gradients 和其他花哨的东西。

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

期待成为跨浏览器标准的东西；-)

score 1 · Accepted Answer

您不能设置单选按钮的样式。但是，您可以做的是使用 javascript 隐藏实际的单选按钮并将其替换为可单击的spanordiv并更改实际隐藏单选按钮的选中属性。然后，您可以设置样式span或div使用 css。

score 1 · Accepted Answer

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

请注意按钮如何仍然显示在屏幕上（不display: none，因此屏幕阅读器不会对表单有任何问题）但是图像（精灵）在它们每个上方，所以我们再也看不到原版按钮了。您可以通过在 Firebug 中使用绝对定位元素的 left 和 top 值来了解其中的技巧。

或者你也可以听从@meagar 的明智建议

score 0 · Accepted Answer

伙计，你可以使用 CSS3 来实现这一点。不是真的，你不能！