REDLINE MAGAZINE

このページは　E:checked (UI要素の状態擬似クラス)　のサンプルページです。

チェックボックスやラジオボタンがチェックされた状態のときにラベル部分に背景色をつける例。

• 　チェックボックス1
• 　チェックボックス2
• 　チェックボックス3

• 　ラジオボタン1
• 　ラジオボタン2
• 　ラジオボタン3

このサンプルのCSS

input:checked + label{
	background:#fcc; /* 背景色・ピンク */
	}

このサンプルのHTML

<ul>
<li><input type="checkbox" id="check1" />　<label for="check1">チェックボックス1</label></li>
<li><input type="checkbox" id="check2" />　<label for="check2">チェックボックス2</label></li>
<li><input type="checkbox" id="check3" />　<label for="check3">チェックボックス3</label></li>
</ul>
<ul>
<li><input type="radio" name="sample" id="radio1" />　<label for="radio1">ラジオボタン1</label></li>
<li><input type="radio" name="sample" id="radio2" />　<label for="radio2">ラジオボタン2</label></li>
<li><input type="radio" name="sample" id="radio3" />　<label for="radio3">ラジオボタン3</label></li>
</ul>