IE单选按钮隐藏不起作用

Question

这段代码可以在Chrome中使用，但默认的单选按钮在IE中显示在样式上。

在IE中，单选按钮未被隐藏。这是代码。

＆＃13;

＆＃13;

input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 15px !important;
  height: 15px !important;
  border: 3px solid #999999 !important;
  border-radius: 50% !important;
  outline: none !important;
}
input[type=radio]:hover {

}
input[type=radio]:before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 auto !important;
  border-radius: 50% !important;
}
input[type=radio]:checked:before {
  background: #005eb8 !important;
}

＆＃13;

<input type="radio"  id="a"/>No 1
 

＆＃13;

＆＃13;

＆＃13;

Answer 1

代码的问题是它使用input元素上的伪。

伪元素不应该适用于单个标记元素，例如input，img等等，尽管Chrome仍然允许它

如果您在label上设置伪，则可以跨浏览器

div {
  padding: 5px 0;
}
input[type="radio"] {
  display: none;
}
input[type="radio"] + label::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 8px -2px 0;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid gray;
}
input[type="radio"]:checked + label::before {
  background: #005eb8;
}

<div>
  <input type="radio" id="r1" name="rd">
  <label for="r1">Button 1</label>
</div>
<div>
  <input type="radio" id="r2" name="rd">
  <label for="r2">Button 2</label>
</div>

Answer 2

保持简单。

• 使用默认（应用浏览器）样式
• 使用自定义的无线电元素 （需要额外的标记，js等。）

Tympanus为您提供了很好的例子。他们使用'label'和伪元素来创建漂亮的自定义单选按钮。