4

重複の可能性:
'input' 要素の前の CSS コンテンツの生成

CSSのみを使用してカスタムチェックボックスを実行しようとしています。これは、Webkit ベースのブラウザー (chrome、safari) では正常に機能しますが、他のブラウザーでは機能しません。

input[type=checkbox]:before {
  content:'';
  display:inline-block;
  width:24px;
  height:24px;
  margin-top:-8px;
  margin-left:-12px;
  background: url('../img/icons/checkbox_unchecked.png') left center no-repeat;
  border: 1px solid gray;
}
input[type=checkbox]:checked:before {
  background: url('../img/icons/checkbox_checked.png') left center no-repeat;
}​

これが Webkit ベースのブラウザでしか機能しないのはなぜですか? http://jsfiddle.net/jdB4a/ここに jsfiddle があります。画像を背景色に変更しただけですが、効果は同じです。

4

1 に答える 1

1

申し訳ありませんが、-webkit-以外のブラウザではこれを実現できません。そのための最良の方法は、ラベルを含むスパンを作成し、その上にスタイルを配置して不透明度を0にすることです。チェックボックスで。それよりも複雑に聞こえます。とにかくここにcss3マルチブラウザカスタムチェックボックスを実現する方法を説明するデモへのリンクがあります、それが役立つことを願っています。

http://acidjs.wemakesites.net/imageless-css-3-custom-checkboxes-and-radio-buttons.html

于 2012-11-28T10:10:58.190 に答える