Question

<input type="checkbox" name="NotifyWhenOpen" value="true">
<input type="hidden" name="NotifyWhenOpen" value="false">
<label for="NotifyWhenOpen">&nbsp;</label>

以上html在下面工作时不起作用

<input type="checkbox" name="NotifyWhenOpen" value="true">
<label for="NotifyWhenOpen">&nbsp;</label>
<input type="hidden" name="NotifyWhenOpen" value="false">

CSS：

.checkbox { position: relative; margin-top: 2px; padding: 0; display: inline-block }
.checkbox input[type=checkbox] { display: none; padding-left: 0; }  
.checkbox label:before { border-radius: 3px;  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; position: absolute; left: 0; bottom: 1px; background: #eef5f7; border: 1px solid #999; } 
input[type=checkbox]:checked + label:before { content: "\2713"; font-size: 13px; color: #0090D9; text-align: center; font-weight: 600; line-height: 15px; }

Js Fiddle：http://jsfiddle.net/x8VGB/

如何让它与第一个一起使用？

Answer 1

在第一个示例中，label元素不是checkbox输入的相邻兄弟（隐藏输入位于中间）：因此您需要使用通用兄弟选择器{{1}瞄准一个不相邻的兄弟

有关详细信息和浏览器支持，请参阅MDN docs

Answer 2

您需要使用其他

使用〜而不是+

如果我们之间有一些元素，那么在css无法工作之前

2 个答案: