: जाँच की छद्म वर्ग क्रोम

Question

में काम नहीं करता मैं इस सीएसएस के साथ एक कस्टम चेकबॉक्स बना रहा हूं:

<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 तत्वों द्वारा बनाई गई हैं:

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 मार्कअप है @Html.EditorFor(model => model.BooleanProp)Razor में। यह कोड क्रोम को छोड़कर ठीक काम करता है। असल में क्रोम में, जब हम चेकबॉक्स पर क्लिक करते हैं, तो हम प्रभाव देखेंगे (प्रभाव से मेरा मतलब है कि लेबल के लिए पृष्ठभूमि-छवि को बदलना जो चेकबॉक्स चेक किया गया है या नहीं) हम सबमिट बोत पर क्लिक करने के बाद। कोई विचार कृपया?

अद्यतन

यहाँ एक demo

Answer 1

मुझे विश्वास है कि वेबकिट श्रृंखलित + चयनकर्ताओं कि ... ~ label के लिए छद्म चयनकर्ताओं

स्वैप श्रृंखलित ... + input + label चयनकर्ताओं का पालन के साथ मुद्दों है।

उदाहरण के लिए:

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