Html 单选按钮的样式似乎只适用于Chrome

纯CSS在Chrome中工作。但并非所有浏览器都是如此

有什么想法吗

下面是我的示例代码：

不
对
.放射性标签{
左侧填充：10px；
}
.放射性标记跨度{
左侧填充：17px；
垫面：5px；
}
.radioLabel输入[类型=无线电]{
光标：指针！重要；
}
.radioLabel输入[类型=无线电]：之后{
内容：''；
位置：相对位置；
显示：内联块；
顶部：-2px；
左：-2px；
宽度：15px；
高度：15px；
背景颜色：灰色；
边界半径：20px；
边框：灰色实心4px；
}
.radioLabel输入[类型=无线电]：选中：之后{
背景色：红色；
}

输入不能有

：在
之后或
：在
元素之前，您应该将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;
}

任何获得理想和非理想状态截图的方法都是糟糕透顶的。但是谢谢你的解释和演示@贾森福利亚：没问题：）很高兴我能帮上忙
.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;
}