チェックボックスのラベルの背景色をチェック時に変更したい

Question

チェックボックスをラベルで囲って、TABLEのTD内に設置しています。

<td id='xxxx'>
	<label for='xxxx'>
		<input type='checkbox' name='NAME' value='on' id='xxxx'>
	</label>
</td>

<style>
label{
	width:100%;
	display:block;
}
</style>

チェックボックスの後にラベルを持ってきて、隣接させれば、

input[type="checkbox"]:checked + label{

	background-color: red;
}

で一発なのですが、

ラベルでチェックボックスが囲われてしまっているので、このCSSではチェック時に背景色を変えることができません。

どのようなCSSを書けば、チェック時にLabelの背景色を変更することができるのでしょうか

Answer 1

CSS3では現状できないですね。

JavaScriptを使ってonChangeイベントで判断するのが無難な気がします。

Comments

[t7y4j8orhiyjhug]

そうなんですね～
もしダメだった場合に備えて、一応JS準備しておいたので、多分これで対応することになりそうです・・

<td id='tttt'>
<label for='xxxx'>
<input type='checkbox' name='NAME' value='on' id='xxxx' onclick="change_bgc();">
</label>
</td>

<script>
function change_bgc(){
if (document.getElementById("XXXX").checked) {
document.getElementById("tttt").style.background = 'red';
} else {
document.getElementById("tttt").style.background = '#ffffff';
}
}
</script>

[s8_chu]

Selectors Level 4 の Editor’s Draft にある`has`擬似クラスが実装されれば、質問者さんの実現したいことが行えます( https://drafts.csswg.org/selectors-4/#relational )。この擬似クラスはまだ使えませんが、一応知っておくと良いと思います。