css - 设置单选按钮的样式

Question

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

我试图弄清楚在css中寻找什么导致单选按钮呈现的差异。

这两种情况如下所示：

错误的：

正确的：

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

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

Answer 1

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

• http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
• http://www.andreapinchi.it/how-to-style-radio-buttons-with-pure-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中试试

Answer 2

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

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

Answer 3

我找到了罪魁祸首：

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

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

Answer 4

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