1

css3 疑似要素を使用してラジオ ボタンのスタイルを設定しようとしています。クロムではうまく機能しますが、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では機能しません(任意の ; ラジオ ボタンだけに限定されているわけではありません)。inputinput

ここで利用可能な証明: http://jsfiddle.net/LvaE2/1/ -- 最も単純なケースでも、機能しません。

また、IE や Opera では動作しません。それが Chrome で機能するという事実は、Chrome がそれを許可するという仕様を超えているためです。

最善の策は、属性labelを使用して実際のラジオ ボタンにリンクされている要素でスタイリングを行い、ラジオ ボタン自体を に設定することです。これは、他の誰もがそれを行う方法です。fordisplay:none;

関連する質問: ::before および ::after 疑似要素をサポートする要素はどれですか?

それが役立つことを願っています。

于 2013-09-04T10:21:11.700 に答える