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

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

.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，所以我有一个可以为我提供该功能的

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

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

---

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

由于您不反对使用JS，您可能希望签出。我们已经在几个需要旧浏览器支持和功能自定义样式复选框/收音机的项目中使用了它。

我通常在较大的项目中使用“隐藏输入”并使用图像，但对于在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

---

它是否支持：before和：after伪选择器？我看不到任何文档！在主页上，：before和：after未在列表中提及！是的。显然，这需要与提到的其他库之一结合使用，例如JQuery。但应该有助于满足您的需求。此外，为了提高性能，您还可以使用IE条件加载它，仅适用于较旧的浏览器！嗯，这对我不起作用。我使用的是IE11，但它模仿了IE8。这就是为什么我的单选按钮没有从：before和：after中重新绘制的原因吗？事实上，compat模式对于测试兼容性并不是很好，我在使用该方法时遇到了各种问题，而不是您之前测试的本机浏览器。可能值得在实际的IE8浏览器中进行检查。我不敢肯定，我害怕看不见。但这两个伪元素肯定都包含selectivizr。

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