「CSS3 チェックしたトコを色つけたい」のサンプル

実際のソース

<style type="text/css">
	/** チェックボックス、ラジオボタンの透明化 **/
	.iptChkbox,
	.iptRadio {
		font-size: 100%;
		width: 1em;
		margin: 0;
		padding: 0;
		opacity: 0;
	}
	
	/** チェックボックス、ラジオボタン変わりに表示する内容 **/
	.iptChkbox+label:before,
	.iptRadio+label:before {
		display: inline-block;
		content: "";
		vertical-align: top;
		
		background-color: white;
		color: #000;
		
		border: 1px solid #000;
		
		width: 0.68em;
		height: 0.68em;
		
		margin-left: -1em;
		margin-top: 0.25em;
		margin-right: 0.2em;
	}
	
	/** チェックボックス、ラジオボタン変わりの角丸設定 **/
	.iptChkbox+label:before { border-radius: 0.1875em; }
	.iptRadio+label:before  { border-radius: 0.5em; }
	
	/** フォーカスがあたったときのチェックボックス、ラジオボタン変わりの装飾 **/
	.iptChkbox:focus+label:before,
	.iptRadio:focus+label:before {
		outline: 1px dotted;
	}
	
	/** チェックされたときの「レ」点。 **/
	.iptChkbox:checked+label:before {
		content: "\2714";
		line-height: 0.625;
	}
	/** チェックされたときの「◎」化。**/
	.iptRadio:checked+label:before {
		border-width: 0.4em;
		border-style: double;
		width: 0;
		height: 0;
	}
	
	/**
	 * チェックボックス、ラジオボタンの次のラベルタグ
	 * ※チェックした時に色をつけたときの横余白が欲しいため必要
	**/ 
	.iptChkbox+label, .iptRadio+label {
		display: inline-block;
		padding: 0 3px;
	}
	
	/** チェックされた時、ラベルに背景色 **/
	.iptChkbox:checked+label, .iptRadio:checked+label {
		background-color: #ccc;
	}
</style>

<h2>チェックボックスのサンプル</h2>
<div style="margin-top: 0.5em;">
	<input type="checkbox" class="iptChkbox" id="chkbox1" /><label for="chkbox1">鶏精</label><br />
	<input type="checkbox" class="iptChkbox" id="chkbox2" /><label for="chkbox2">豚精</label><br />
	<input type="checkbox" class="iptChkbox" id="chkbox3" /><label for="chkbox3">ひな皮</label><br />
	<input type="checkbox" class="iptChkbox" id="chkbox4" /><label for="chkbox4">もちベーコン</label><br />
	<input type="checkbox" class="iptChkbox" id="chkbox5" /><label for="chkbox5">丸ごとシマウマ</label><br />
</div>

<h2>ラジオボタンのサンプル</h2>
<div style="margin-top: 0.5em;">
	<input type="radio" name="kushi" class="iptRadio" id="radio1" /><label for="radio1">鶏精</label><br />
	<input type="radio" name="kushi" class="iptRadio" id="radio2" /><label for="radio2">豚精</label><br />
	<input type="radio" name="kushi" class="iptRadio" id="radio3" /><label for="radio3">ひな皮</label><br />
	<input type="radio" name="kushi" class="iptRadio" id="radio4" /><label for="radio4">もちベーコン</label><br />
	<input type="radio" name="kushi" class="iptRadio" id="radio5" /><label for="radio5">丸ごとシマウマ</label><br />
</div>