web-dev-qa-db-ja.com

チェックされたタグと後のタグを使用したcssフォームチェックボックスのスタイル

JavaScriptやJQueryを使用せずにフォームをデザインしようとしています。一連のチェックボックスが含まれています。チェックボックスがオフの場合、チェックボックスの後に特定のgifを表示するという考え方です。それ以外の場合は、その後に何も表示しません。これは私が持っているコードです：

input[type=checkbox]::after
{
  content: url(images/unchecked_after.gif);
  position:relative;
  left:15px;
  z-index:100;
}
input[type=checkbox]:checked::after
{
  content:"";
}

Chromeで動作しますが、FirefoxまたはIEでは動作していないようです。何が問題になっていますか？

csscss3cross-browserpseudo-elementcss-content
8
user1316401

私のために働いたクロスブラウザソリューションは、チェックボックス入力の後に空のラベル（クラス「checkbox_label」）を含めてから、チェックボックスではなくITのスタイルを設定することでした。

input[type=checkbox] + label:after
{
  content: url(images/unchecked_after.gif);
  position:relative;
  left:0px;
  top:1px;
  z-index:100;
}

input[type=checkbox]:checked + label:after
{
  content:"";
}

.checkbox_label
{
  height:0px;
  width:0px;
  display:inline-block;
  float:left;
  position:relative;
  left:20px;
  z-index:100;
}
8
user1316401

どうやら、::beforeおよび::after疑似要素の使用は仕様でサポートされていません。あなたの質問は答えられます ここ 。お役に立てば幸いです。

3
CoderOfHonor