Question

如何在CSS中选择单选按钮？我正在使用的HTML生成，所以我不能添加类或其他属性。

我在互联网上找到了输入[type =“radio”]，但我不知道这是否是普通的CSS，并且大多数浏览器都支持。

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

谢谢，

布雷特

Answer 1

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

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

Answer 2

属性选择器（input [type =“radio”]）是正确的解决方案，除IE6之外的所有内容都广泛支持：）

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

A）。确保您的网站不依赖于此，并允许IE6正常降级。

B）。没有它的生活

Answer 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/

它修复了低于7的版本的问题这里将说明您最感兴趣的修复：

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

Answer 4

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

应该注意的是.htc文件通常会导致可怕的性能，应该谨慎使用并进行全面测试，以确保性能达到可接受的程度。

Answer 5

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

Answer 6

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

你如何在CSS中选择一个单选按钮？

6 个答案: