/ / css checkboxとafterタグ付きのチェックボックススタイリング[duplicate] - css、css3、クロスブラウザ、擬似要素、css-content

css、css3、クロスブラウザ、擬似要素、css-content

私は使用しないでフォームを設計しようとしています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ではうまく動作していないようです。何が問題なのですか?

回答:

回答№1は5

私のために働いたクロスブラウザソリューションは、チェックボックス入力の後に空のラベル(クラス "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;
}

回答№2の場合は3

どうやら、 ::before そして ::after 疑似要素は仕様でサポートされていません。あなたの質問に答えます ここに。希望が助けてくれる!