造型单选按钮

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）。单击单选按钮进行检查。

建议使用谷歌浏览器的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