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;。这就是其他人的做法。

此处的相关问题：Which elements support the ::before and ::after pseudo-elements?

希望有所帮助。

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

1 个答案: