:checked 伪类在 Chrome 中不起作用答案

【问题标题】：:checked pseudo class does not work in Chrome:checked 伪类在 Chrome 中不起作用
【发布时间】：2012-12-24 22:41:12
【问题描述】：

我正在用这个 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;
}

这是我的 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>

input 元素由@Html.EditorFor(model => model.BooleanProp) 在Razor 中创建。除了在 Chrome 中，此代码工作正常。实际上在 Chrome 中，当我们点击复选框时，我们会在点击提交 bottun 后看到效果（我的意思是更改显示复选框的标签的背景图像是否已选中）。请问有什么办法吗？

更新

这是demo

【问题讨论】：

您是否有simple demo 可以看到重现您的问题？

标签： html css checkbox css-selectors

【解决方案1】：

我认为 Webkit 在使用伪选择器之后的链式 + 选择器存在问题

将链接的... + input + label 选择器替换为... ~ label。

例如：

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

【讨论】：

@Mak 这不是一个真正有用的评论。你能提供一个JSFiddle 证明这不起作用