如何在選中複選框之前選擇標籤？

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/