私は使用しないでフォームを設計しようとしています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
疑似要素は仕様でサポートされていません。あなたの質問に答えます ここに。希望が助けてくれる!