: işaretli sözde dersiniz bu css ile özel bir onay kutusunu yaratıyorum Chrome

Question

çalışmaz: input elemanları tarafından oluşturulur

<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> 

: Burada

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; 
} 

ve benim html biçimlendirme olduğunu Razor'da @Html.EditorFor(model => model.BooleanProp). Bu kod, Chrome dışında iyi çalışır. Aslında Chrome'da, onay kutusunu tıkladığımızda, efekt bottun'u tıkladıktan sonra efektin (yani, onay kutusunu işaretli olan etiket için arka plan görüntüsünü değiştirmeyi kastediyorum) etkisini göreceğiz. Herhangi bir fikrin lütfen?

GÜNCELLEME İşte

Ben Webkit ... ~ label için sözde seçicileri

Takas zincirleme ... + input + label seçiciler izleyin zincirleme + seçicileri ile sorunları olduğuna inanıyorum bir demo

Answer 1

olduğunu. Örneğin

:

div:not(#foo) > input[type=checkbox] ~ label