: kiểm tra lớp giả không hoạt động trong Chrome

Question

tôi là tạo ra một hộp kiểm tùy chỉnh với css này:

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

và đây là đánh dấu html của tôi:

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

Các yếu tố input được tạo ra bởi @Html.EditorFor(model => model.BooleanProp) trong Razor. Mã này hoạt động tốt ngoại trừ trong Chrome. Trên thực tế trong Chrome, khi chúng ta nhấp vào hộp kiểm, chúng ta sẽ thấy hiệu ứng (bằng hiệu ứng tôi có nghĩa là thay đổi hình nền cho nhãn cho thấy hộp kiểm được chọn hay không) sau khi chúng tôi nhấp vào gửi bottun. Bất kỳ ý tưởng xin vui lòng?

CẬP NHẬT

Đây là một demo

Answer 1

Tôi tin rằng Webkit có vấn đề với xích + selectors rằng theo selectors giả

Swap các xích ... + input + label selectors cho ... ~ label.

Ví dụ:

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