: sprawdzone klasa pseudo nie działa w Chrome

Question

Tworzę niestandardowego wyboru z tej 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; 
} 

i tu jest mój znaczników 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> 

W input elementy są tworzone przez @Html.EditorFor(model => model.BooleanProp) w Razor. Ten kod działa poprawnie, z wyjątkiem Chrome. Właściwie w Chrome, kiedy klikamy na pole wyboru, zobaczymy efekt (przez efekt mam na myśli zmianę obrazu tła dla etykiety, która pokazuje, że pole wyboru jest zaznaczone, czy nie) po kliknięciu przycisku Wyślij bottun. Masz pomysł?

UPDATE

Oto demo

Answer 1

wierzę, że ma problemy z Webkit przykuty + selektorów, które następują selektorów pseudo

zamienić przykuty ... + input + label selektorów dla ... ~ label.

Na przykład:

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