CSS3 单选按钮在 Firefox 中不起作用

Question

我正在尝试使用 css3 伪元素设置单选按钮的样式。在 Chrome 中效果很好，但它会跳回 Firefox 中的默认样式。任何想法？

这是一个小提琴：JSFIDDLE

HTML：

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

CSS：

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;
}

我试图避免背景图像

Answer 1

不幸的是，您尝试做的事情是无效的 -::before并且::after不适用于input元素（任何input；它不仅限于单选按钮）。

证明可以在这里： http: //jsfiddle.net/LvaE2/1/——即使在最简单的情况下，它也不起作用。

它也不适用于 IE 或 Opera。它在 Chrome 中确实有效的事实是因为 Chrome 超出了允许它的规范。

label最好的选择是使用该属性对链接到实际单选按钮的元素进行样式设置for，然后将单选按钮本身设置为display:none;。其他人都是这样做的。

相关问题在这里：哪些元素支持 ::before 和 ::after 伪元素？

希望有帮助。