在IE8中设置单选按钮和复选框的样式

Question

关注如何设置单选按钮和复选框样式的各种在线教程。我使用以下代码进行了管理：

.radio input {
  -webkit-appearance: none;
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
  padding: 7px;
  border-radius: 50px;
  display: inline-block;
  position: relative;
  outline: none;
  margin-right: 10px;
  margin-top: 6px;
}

.radio input:checked:after {
  content: ' ';
  width: 10px;
  height: 10px;
  border-radius: 50px;
  position: absolute;
  top: 2px;
  background: #99a1a7;
  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
  text-shadow: 0px;
  left: 2px;
  font-size: 32px;
}

.radio input:checked {
  background-color: #e9ecee;
  color: #99a1a7;
  border: 1px solid #adb8c0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}

这适用于现代浏览器，它提供了以下内容：

不幸的是我也必须支持IE8，以上对IE8不起作用。我知道:checked伪元素对IE8不起作用，所以我有following script应该为我提供这个功能。

我还有一个条件CSS注释，它带来了一个专门用于IE8的样式表。

<!--[if IE 8]>
    <link href="@Url.Content("~/Content/ie8-styles.css")" rel="stylesheet" type="text/css" />
<![endif]-->

我想知道的第一件事是，IE8是否支持这样的内容（请记住JS脚本）？

.radio input:checked:after {
    content: "boo";
    width: 10px;
    height: 10px;
    border-radius: 50px;
    position: absolute;
    top: 2px;
    background: #99a1a7;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .3);
    text-shadow: 0;
    left: 2px;
    font-size: 32px;
}

我很好奇它是否会读取:checked:after的双伪元素，因为现在我在单选按钮之前没有看到boo这个词！

Answer 1

由于您不反对使用JS，因此您可能需要结帐http://selectivizr.com/。我们在几个需要较旧浏览器支持和功能自定义样式复选框/无线电的项目中使用了它。

Answer 2

我通常在较大的项目上使用“隐藏输入”并使用图像，但是对于在IE8上运行的较简单的项目，我使用以下CSS，它可以完美地工作。这对较新的浏览器的影响可忽略不计。除非添加背景颜色，否则高度/宽度无效。这对于IE8特定的样式表将非常有用。

input[name="bdu"] {height:1em; width:1em; background-color:#000;}

还有html。

<input name='bdu' type='radio' value='S'/> SET

这里有3个示例，它们是从工作页面上拉出来的。没有CSS，1em和2em。