单选按钮样式

Posted 2023-03-05

【中文标题】单选按钮样式

【英文标题】：Radio Button Styling

【发布时间】：2012-01-21 15:59:54

【问题描述】：

我想用纯 CSS 设置单选按钮的样式，没有类或 ID。只需输入[type=radio]。 我想为未选择和选择使用背景图像。 但是，-vendor-appearance:none;不适用于 Trident 或 Gecko。只是 Webkit。 在这些浏览器中，您可以将背景图像视为单选按钮的背景，但按钮仍然存在，而不仅仅是显示图像，我怎样才能摆脱按钮，只显示背景图像。小提琴：http://jsfiddle.net/7kScn/

【参考方案1】：

您可以使用 CSS2 选择器技巧连接到无线电组并在之后立即显示其他内容。

见：http://jsfiddle.net/7kScn/1/

这只是一个基本示例，但它的操作前提是隐藏输入字段，然后在其后立即设置标签的样式，使其具有您正在检查的实际内容的效果。

【讨论】：

CSS3? :( 这是一个电子商务网站，所有功能都不能仅基于 CSS3 样式。如果它回退到像往常一样只显示复选框，那是可以接受的，但如果你打电话给display:none;，那我就不能了' t真的使用它。

根据this compatibility chart，这个特定的选择器在当前状态下应该可以正常工作。它仅在 IE6 中不受支持（关于 IE7/8 的静态说明不影响它的这种使用）。它似乎是 CSS2 (?)。

但是我的网站不使用标签，没有+标签怎么办

您不能使用 CSS 从它们中删除实际的框，这就是单选框​​/复选框 。唯一的其他解决方案是使用 javascript 修改那里的 html 以使它们看起来更漂亮。

刚刚使用 Adob​​e BrowserLab 检查，在 IE7 + 中工作，在 IE6 中回退到标准可见性。太好了，现在标签有什么解决方法吗？

【参考方案2】：

这个有用吗？ 输入[类型=收音机]：检查 边框：1px纯黑色；

【参考方案3】：

我写了一篇关于如何仅使用 CSS 自定义复选框和单选框的教程，以及通过设置标签样式并使用 :before 和 :after 伪类来创建开/关开关。也许这有帮助:) 在这里阅读：http://blog.felixhagspiel.de/index.php/posts/custom-inputs