html标签 伪类作用,html – ：checked伪类在Chrome中不起作用

我正在使用此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标记：

Keep me!

输入元素由Razor中的@ Html.EditorFor(model => model.BooleanProp)创建.此代码在Chrome中运行正常.实际上在Chrome中,当我们点击复选框时,我们会在点击提交bottun后看到效果(实际上我的意思是更改标签的背景图像,显示复选框是否已选中).有什么好主意吗？

UPDATE

这是一个demo