设置单选按钮的样式答案

【问题标题】：Styling a radio button设置单选按钮的样式
【发布时间】：2013-06-08 05:56:09
【问题描述】：

我在两个不同的页面上有一个 jQuery 对话框。出于某种原因，单选按钮看起来不同（一个页面是纯 HTML/Javascript，另一个是由我工作的客户创建的一些内部框架创建的）。

我正在尝试找出在 css 中查找导致单选按钮呈现差异的内容。

这两种情况如下所示：

错误：

右：

任何人都可以提供一些关于寻找什么的线索吗？

也许我应该补充一下，两张图片都来自 IE8。

【问题讨论】：

第一步始终是检查生成的 DOM 并比较两个版本。如果相等，那么您将检查应用于正确和不正确的样式并比较它们。可能只是缺少一个样式表，或者一个规则覆盖了另一个。
不知道 IE8，但是不错的浏览器提供了一个“检查元素”上下文菜单，您可以在其中看到应用于您右键单击的元素的 CSS。但是，您可能应该提供具有特定类属性的特定标记。

标签： css internet-explorer-8 radio-button

【解决方案1】：

样式（编辑：边框、颜色、背景）单选按钮本身在 css 中是不可能的。但是你可以使用隐藏的单选按钮和覆盖的图像，就像这里描述的那样

基本上你隐藏你的单选按钮并在它的位置放置一个span，当点击它时，它会改变它的样式：

html

<label><input type="radio"><span class="overlay"></span> radio button</label>

css

input[type=radio] {
  opacity: 0;
  z-index: 9999;
}
/* default radio button style: unchecked */
.overlay {
  display: inline-block;
  position: relative;
  left: -1em; /* or whatever length you need here */
  height: 1em;
  width: 1em;
  background-color: red;
}
/* changed style when checked */
input[type=radio]:checked + .overlay {
  background-color: green;
}

在这个jsFiddle试试吧

【讨论】：

-1 表示“使用 CSS 无法设置单选按钮本身的样式”。首先，您链接到的文章显示了如何使用 CSS 来做到这一点（因此使您的声明无效），其次，它相当可实现，第三，我已经做到了。使用 CSS。附言“-1”是象征性的，我不会从你那里拿走有用的答案。
我的意思是您不能更改单选按钮的background 或border：jsfiddle.net/ABQSv。（如果可以的话，我完全错了，承认一切。但是告诉我。）你肯定可以用纯 css 设置单选按钮（比如它的位置、不透明度等），但我认为这是不是它的意思。
做了一些跨浏览器检查，确实可以在（预闪烁）Opera 和 Internet Explorer 中工作。真丢人。（但我认为不能在 Firefox/Webkit 中工作是一个主要问题......）
我想我在大量的 css 文件中发现了一些东西：一个 CSS 过滤器定义。我希望删除它会有所帮助。只是等待重新部署网站。
@Dominik Schreiber，您可以同时更改单选按钮的背景和边框，以及几乎任何其他表单控件。不过，您需要先应用-webkit-appearance: none 规则，这会消除控件的所有视觉样式。当然，这只适用于 Webkit 浏览器。其他浏览器可能有自己的供应商特定的appearance CSS 扩展。

【解决方案2】：

使用 Web Developer Tool 检查这两个元素。在 IE8 中按 F12，然后单击左上角的光标图标（或按 Ctrl+B）。单击单选按钮进行检查。

建议使用 Google Chrome 的 WDT，因为它可以告诉您更多信息（例如相关的 CSS 文件），而且使用起来更简单、更快捷。您可以右键单击单选按钮并单击“检查元素”以查看更多信息（DOM、CSS）。

【讨论】：

FF（最新）也集成了此功能（不再需要萤火虫）。

【解决方案3】：

我找到了罪魁祸首：

<meta name="MSThemeCompatible" content="no">

该位在一页中，而不是另一页。所以要么我必须在一个页面中删除它，要么将它添加到另一个页面中以使它们看起来相似。

【讨论】：

【解决方案4】：

单选按钮的样式非常有限，尤其是在旧版浏览器中。我写了一篇关于如何仅使用 CSS 自定义复选框和单选框的教程，以及通过设置标签样式并使用 :before 和 :after 伪类来创建开/关开关。它有一个 IE8 后备。也许这有帮助:) 在这里阅读：http://blog.felixhagspiel.de/index.php/posts/custom-inputs

【讨论】：