更改複選框標籤的CSS屬性檢查

我有以下的html：更改複選框標籤的CSS屬性檢查

<label> 
    <input type="checkbox" value="cb_val" name="cb_name"> 
    my checkbox text 
    </label>

使用CSS，我加入了背景色爲<label>標籤。

label { background-color:#333; color:#FFF; }

現在我希望在複選框被選中時更改標籤的背景顏色。我知道如何用JavaScript做到這一點，但有沒有辦法只用CSS？

我已經看到了一些解決方案，但他們使用相鄰的兄弟選擇器，只有當複選框後出現標籤時才起作用。

我仍然希望能解決這個沒有javascript，有沒有人有線索？

UPDATE：

由於我害怕，就不能做到這樣，所以我必須用JS做到這一點，或實現不同的HTML結構相同的視覺效果。我想一次性設置標籤和文本框的背景顏色，所以我可以選擇一個解決方案，將複選框放置在標籤頂部。好點PlantTheldea！

或者我可以將背景顏色應用於標籤和複選框。

謝謝大家！

來源

2014-01-10 Michiel

沒有父選擇器，因此您不能根據子輸入元素的條件更改父標籤元素。沒有JavaScript。 – j08691

你可以像這樣純CSS實現這一目標，

<input type="checkbox" id="cb_1" value="cb_val" name="cb_name"> 
<label for="cb_1"> 
    my checkbox text 
</label>

有了這個CSS，

label { background-color:#333; color:#FFF; } 

input[type="checkbox"]:checked + label { 
    background: brown; 
}

JSFIDDLE

記住

標籤必須在checkbo之後x，所以你需要更多的樣式來保持你的相同外觀。

下面是一個選項，它可以更具有相同的外觀，如您想要的，New fiddle。這不涉及定位任何絕對的東西，只是一些欺騙。

來源

2014-01-10 15:46:13

我知道這一點，但在你的情況下輸入不嵌套在標籤。我甚至在我的探索中說，我知道這個解決方案使用鄰接的兄弟選擇符（+）。 – Michiel

@MichielReyers - 問題就變成了爲什麼你需要它嵌套在標籤中？如果您設置了'for'屬性，那麼Universe中的每個瀏覽器都可以工作。我編輯了答案來展示這一點，如果你點擊標籤，它會點擊複選框。 – PlantTheIdea

@MichielReyers你說你知道如何用腳本來做到這一點，然後你要求一個純粹的CSS解決方案。這是純粹的CSS解決方案。我還說過，「標籤必須位於複選框後面，因此您需要更多地使用它來保持您的外觀。」 –

當您選中標籤時，您無法僅通過CSS直接對標籤進行樣式設置，但您可以對複選框的同級進行樣式設置。

http://jsfiddle.net/QdDpL/

HTML

<label> 
    <input class="check" type="checkbox" /> 
    <span class="label-text">Checkbox</label> 
</label>

CSS

label { 
    background: yellow; 
} 
label .label-text { 
    background: cyan; 
} 
label input.check:checked + .label-text { 
    background: lime; 
}

您還可以能夠與花車和留白，使複選框撥弄看起來好像它是.label-內文本跨度。

請參閱瀏覽器支持的兄弟選擇以下鏈接： http://caniuse.com/css-sel2

或者作爲另一個回答說，你可以風格的標籤，如果是複選框的兄弟 - 但是就像我的回答仍然會不包含標籤中的複選框。

來源

2014-01-10 15:48:12

更改複選框標籤的CSS屬性檢查

回答

相關問題