このcssでカスタムチェックボックスを作成しています:
input[type="checkbox"] {
background: transparent;
border: inherit;
width: auto;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + input + label,
input[type=checkbox] + label,
div:not(#foo) > input[type=checkbox] + label,
div:not(#foo) > input[type=checkbox] + input + label {
cursor: pointer;
height: 16px;
padding: 0 0 0 18px;
background: transparent url(/assets/images/checkbox-unchecked.png) no-repeat left 3px;
}
input[type=checkbox]:checked + input + label,
input[type=checkbox]:checked + label,
div:not(#foo) > input[type=checkbox]:checked + label,
div:not(#foo) > input[type=checkbox]:checked + input + label {
background: transparent url(/assets/images/checkbox-checked.png) no-repeat left 3px;
}
.ie6 input[type=checkbox],
.ie7 input[type=checkbox],
.ie8 input[type=checkbox] {
display: inline-block;
*display: inline;
*zoom: 1;
}
ここに私のhtmlマークアップがあります:
<div class="editor-label">
<input class="check-box" data-val="true" id="Persistent" name="Persistent" type="checkbox" value="true" />
<input name="Persistent" type="hidden" value="false" />
<label for="Persistent">Keep me!</label>
</div>
input
要素は によって作成され@Html.EditorFor(model => model.BooleanProp)
ますRazor
。このコードは Chrome 以外では問題なく動作します。実際にChromeでは、チェックボックスをクリックすると、送信ボタンをクリックした後に効果が表示されます(つまり、チェックボックスがオンになっているかどうかを示すラベルの背景画像を変更することを意味します)。何かアイデアはありますか?
アップデート
ここにデモがあります