1

我正在尝试使用 css3 伪元素设置单选按钮的样式。In 在 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;
}

我试图避免背景图像

4

1 回答 1

5

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

此处提供证明：http: //jsfiddle.net/LvaE2/1/——即使在最简单的情况下，它也不起作用。

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

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

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

希望有帮助。

于 2013-09-04T10:21:11.700 回答