Html CSS3单选按钮在Firefox中不工作

我正在尝试使用css3伪元素设计单选按钮。In在chrome中效果很好，但在firefox中它又回到了默认样式。有什么想法吗

这是一把小提琴：

HTML：

<input class="fancy" name="cc1" type="radio" checked/>
<input class="fancy" name="cc1" type="radio"/>

---

我试图避免背景图像

不幸的是，您试图做的是无效的--：before和

：：before

和

：before

不处理

输入

元素（任何

输入

；它不仅限于单选按钮）

这里提供的证据是：即使在最简单的情况下，它也不起作用

它在IE或Opera中也不起作用。它在Chrome中工作的事实是因为Chrome在允许它方面超出了规范

最好的方法是使用

for

属性在链接到实际单选按钮的

标签

元素上进行样式设置，然后将单选按钮本身设置为

显示：无。其他人都是这样做的

有关问题如下:

希望这能有所帮助。
不幸的是，您尝试执行的操作无效--

：before和

：：before

和

：before

不要在

输入

元素上工作（任何

输入

；它不仅限于单选按钮）

这里提供的证据是：即使在最简单的情况下，它也不起作用

它在IE或Opera中也不起作用。它在Chrome中工作的事实是因为Chrome在允许它方面超出了规范

最好的方法是使用

for

属性在链接到实际单选按钮的

标签

元素上进行样式设置，然后将单选按钮本身设置为

显示：无。其他人都是这样做的

有关问题如下:

希望有帮助

input[type="radio"].fancy:before {
  content:"";
  width: 24px;
  height: 24px;
  background-color: #1f1f1f;
  display: block;
  border-radius: 50%;
  position: relative;
  top: -6px;
  left: -6px;
  box-shadow: 0 1px 2px rgba(255,255,255,.1),
              inset 0 2px 2px rgba(0,0,0,.8);
}

input[type="radio"].fancy:checked:before {
  visibility: visible;
  content:"";
  width: 24px;
  height: 24px;
  background-color: #1f1f1f;
  display: block;
  border-radius: 50%;
  position: relative;
  top: -6px;
  left: -6px;
  box-shadow: 0 1px 2px rgba(255,255,255,.2),
          inset 0 2px 2px rgba(0,0,0,.8);
}

input[type="radio"].fancy:checked:after {
  visibility: visible;
  content:"";
  width: 14px;
  height: 14px;
  display: block;
  border-radius: 50%;
  position: relative;
  top: -25px;
  left: -1px;
  background: yellowgreen;
}