样式单选按钮似乎只能在Chrome中使用

Question

纯CSS在Chrome中工作。但并不是所有的浏览器。

有什么想法吗？

这是我的示例代码：

https://jsfiddle.net/kdtrtb03/5/

<label class="radioLabel">
    <input type='radio' value='false' name='test' />
    <span>No&nbsp;</span>
</label>
<label class="radioLabel">
    <input type='radio' value='true' name='test' />
    <span>Yes&nbsp;</span>
</label>

.radioLabel {
        padding-left: 10px;
}
.radioLabel span {
        padding-left: 17px;
        padding-top: 5px;
}
.radioLabel input[type=radio] {
        cursor:pointer !important; 
}
.radioLabel input[type=radio]:after {
        content:' ';
        position:relative;
        display:inline-block;
        top:-2px;
        left:-2px;
        width:15px;
        height:15px;
        background-color:gray;
        border-radius:20px;
        border:gray solid 4px;
}
.radioLabel input[type=radio]:checked:after {
        background-color:red;
}

Answer 1

输入不能有:after或:before元素，您应该将css应用于span：

.radioLabel span:before {
  content: ' ';
  position: relative;
  display: inline-block;
  top: -2px;
  left: -2px;
  width: 15px;
  height: 15px;
  background-color: gray;
  border-radius: 20px;
  border: gray solid 4px;
}
.radioLabel input[type="radio"]:checked + span:before {
  background-color: red;
}

JSFiddle演示