: class pseudo controllato non funziona in Chrome

Question

Sto creando una casella di controllo personalizzati con questo 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; 
} 

e qui è la mia markup 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> 

Gli input elementi sono creati da @Html.EditorFor(model => model.BooleanProp) in Razor. Questo codice funziona bene tranne in Chrome. In realtà in Chrome, quando clicchiamo sulla casella di controllo, vedremo l'effetto (per effetto intendo cambiare l'immagine di sfondo per l'etichetta che mostra che la casella di controllo è selezionata o meno) dopo aver fatto clic su Invia bottun. Qualche idea per favore?

UPDATE

Ecco un demo

Answer 1

Credo che Webkit ha problemi con incatenato + selettori che seguono pseudo selettori

Scambia i incatenati ... + input + label selettori per ... ~ label.

Ad esempio:

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