[簡易]ラジオボタンを画像にする

概要

ラジオボタンを画像にしたい。
でもCSSが長くて面倒。
いろいろ調べてみたけど、ソースコピペしてもうまくいかない。。。

というわけで、楽にON/OFFを画像で表現してみた。

ソース

HTML

<input type="radio" class="sample-radio" id="radio1" name="radio" value="1" checked="checked"/>
<label for="radio1">
	<img src="./radioButton.png" class="radio-img"/>サンプル１
</label>

<input type="radio" class="sample-radio" id="radio2" name="radio" value="2" />
<label for="radio2">
	<img src="./radioButton.png" class="radio-img"/>サンプル２
</label>

CSS

/** 画像サイズ **/
.radio-img {
	width: 30px;
	height: 30px;
	vertical-align: middle;
}
/** チェックボックス本体 **/
.sample-radio {
	display: none;	/* □を消す */
}
/** 画像を半透明にしておく **/
.sample-radio + label img {
	opacity: 0.3;
}
/** チェックされたときの画像は不透明とする **/
.sample-radio:checked + label img {
	opacity: 1;
}

結果

サンプル１

サンプル２