如何在 CSS 中选择单选按钮？答案

【问题标题】：How do you select a radio button in css?如何在 CSS 中选择单选按钮？
【发布时间】：2009-06-16 16:26:52
【问题描述】：

如何在 CSS 中选择单选按钮？我正在使用的 HTML 已生成，因此我无法向其添加类或其他属性。

我在互联网上找到了 input[type="radio"]，但我不知道这是否是常规 CSS 并且大多数浏览器都支持。

还有其他方法可以选择单选按钮吗？

谢谢，

布雷特

【问题讨论】：

标签： css

【解决方案1】：

input[type="radio"] 是attribute selector 的一个示例。它是 CSS3 规范的一部分并且是完全合法的。唯一不支持它们的浏览器是 IE6。如果支持 IE6 对项目很重要，那么您应该考虑向相关单选按钮添加类。

Here's an article 有一个如何有效使用属性选择器的示例。查看this article 了解有关 CSS3 好东西的更多信息。

【讨论】：

您的第一个 URL（链接）也指的是什么？
那是我复制了错误的链接。感谢您的提醒。
这不是 CSS3 的好东西——它实际上是 CSS2 的一部分。所以 IE6 没有任何理由不支持它。

【解决方案2】：

属性选择器input[type="radio"] 是正确的解决方案，除了IE6之外的所有设备都广泛支持:)

如果您无法修改 HTML 以注入类名支持或访问 javascript 来完成此操作，那么您的选择是：

以确保您的网站不依赖于此并允许 IE6 正常降级。
没有它就活下去

【讨论】：

【解决方案3】：

您可以使用jQuery 来选择输入并动态添加一个类。

示例（来源：http://docs.jquery.com/Attributes/addClass#class）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p:last").addClass("selected highlight");
  });
  </script>
  <style>
  p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  .highlight { background:yellow; }
  </style>
</head>
<body>
  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
</body>
</html>

[编辑]

jQuery 的替代方法是使用 http://code.google.com/p/ie7-js/

它修复了 ie 版本低于 7 的大量问题您最感兴趣的修复方法如下所示：

http://ie7-js.googlecode.com/svn/test/attr-value.html

【讨论】：

是的，我喜欢这个主意，但我必须在这个项目上支持 IE 5.5 :(

【解决方案4】：

您上面提到的那个是通过 CSS 定位它的正确方法。它被称为attribute selector。但是，IE6 及以下版本不支持它。可以通过为 IE6 添加条件行为脚本来模拟它们。（谷歌搜索一下，文件结尾一般都是.htc）。

可能应该指出，.htc 文件通常会导致可怕的性能，并且应该谨慎使用并进行彻底测试以确保性能影响是可以接受的。

【讨论】：

egad，.htc 巫毒！对替代解决方案的想法很好。

【解决方案5】：

您的解决方案是正确的，并且适用于除 IE6 之外的所有现代浏览器。对于 IE6，您必须找到选择它们的方法、修改 HTML 或使用 Javascript。

【讨论】：

【解决方案6】：

您可以使用 jQuery 查找页面上的所有单选按钮，然后向其中添加一些 CSS 类。

【讨论】：