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

问题描述 投票：0回答：7

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

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

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

谢谢你，

布雷特

css
7个回答
91
投票

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

这里有一篇文章，其中包含如何有效使用属性选择器的示例。查看这篇文章，了解有关 CSS3 优点的更多信息。

9
投票

属性选择器

input[type="radio"]
是正确的解决方案，除IE6之外都得到广泛支持:)

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

  1. 确保您的网站不依赖于此并允许 IE6 正常降级。
  2. 没有它也能生活
5
投票

您可以使用 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

1
投票

你上面提到的就是CSS定位的正确方法。它称为“属性选择器”。但 IE6 及以下版本不支持它。可以通过为 IE6 添加条件行为脚本来模拟它们。 （只要在google上搜索即可，文件结尾通常是.htc）。 应该注意的是，.htc 文件通常会导致可怕的性能，因此只能谨慎使用并进行彻底测试，以确保性能影响是可以接受的。

0
投票

0
投票

0
投票

.isRadioRead { pointer-events: none; opacity:0.5; }

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.