如何在选中复选框之前选择标签？

Question

当复选框被选中但标签位于复选框之前时，我想将样式应用于标签。

我的代码是：

<label class="label" for="main-checkbox">LABEL</label><br /> 
<input type="checkbox" id="main-checkbox"> 

我一直在与CSS选择奋力做到这一点。

Answer 1

<p><input type="checkbox" name="main-checkbox"> 
<label for="main-checkbox"><span></span></label></p> 

然后使用CSS

p { 
    position: relative; 
} 

p > input[type="checkbox"] { 
    cursor: pointer; 
    position: absolute; 
    left: 3px; 
    top: 0; 
    z-index: 2; 
    width: 26px; 
    height: 26px; 
    opacity: 0; 
    vertical-align: middle; 
} 

p > input[type="checkbox"] +label { 
    vertical-align: middle; 
    background-color: #555; 
    height: 35px; 
    width: 35px; 
    margin-right: 16px; 
    display: inline-block; 
    z-index: 1; 
    position: relative; 
} 

label>span:before { 
    text-indent: 0; 
    font-size: 30px; 
    color: #fff; 
    position: absolute; 
    top: -1px; 
    left: 7px; 
} 

label>span:after { 
    display: none; 
} 

p > input[type="checkbox"]:checked+label:after { 
    content: 'B'; 
    text-indent: 0; 
    font-size: 30px; 
    color: #F0F; 
    position: absolute; 
    top: -1px; 
    left: 7px; 
} 

p > input[type="checkbox"] +label:after { 
    content: 'A'; 
    text-indent: 0; 
    font-size: 30px; 
    color: #F0F; 
    position: absolute; 
    top: -1px; 
    left: 7px; 
} 

检查出的jsfiddle我做：http://jsfiddle.net/rzTFP/

我把复选框变成可点击的一般框。

当标签位于<input>后面时，它可以正常工作，但可以随时随地使用它。

Answer 2

您可以修改“已检查”状态......但它不适用于旧版浏览器。

http://jsfiddle.net/CjpmP/

HTML

<div> 
    <input type="checkbox" id="check" class="check-with-label" /> 
    <label for="check" class="label-for-check">My Label</label> 
<div> 

CSS

.check-with-label:checked + .label-for-check { 
    font-weight: bold; 
} 

我建议使用javascript，让您使用更传统的CSS规则，虽然... http://jsfiddle.net/MGVHX/1/