HTMLフォームで任意の画像をラジオボタンとして使用する方法

HTMLフォームで、複数の選択肢の中から１つだけ選んで欲しい場合は「ラジオボタン」を使用するのですが、好きな画像をラジオボタンとして使いたい場合があります。

その際は、デフォルトのラジオボタン（<input type=”radio”>）をCSSで非表示にしておき、ラベル（<label>）を使って、選択状態を表現してやればOKです。

具体的なコードは次の通りです。（サンプルはこちら）

.radio {
	display: none;
}

.radio + .radio_image {
	border: 3px #ffffff solid;
	background-color: #ffffff;
}
.radio:checked + .radio_image {
	border: 3px #ff0000 solid;
	background-color: #ffeeee;
}

「.radio」で、デフォルトのラジオボタンを非表示にしておき、「.radio:checked + .radio_image」でチェック状態のスタイル、「.radio + .radio_image」で非チェック状態のスタイルを指定します。

<form>
<label><input type="radio" name="animal" value="1" class="radio"><img src="./01.png" class="radio_image"></label>
<label><input type="radio" name="animal" value="2" class="radio"><img src="./02.png" class="radio_image"></label>
<label><input type="radio" name="animal" value="3" class="radio"><img src="./03.png" class="radio_image"></label>
<label><input type="radio" name="animal" value="4" class="radio"><img src="./04.png" class="radio_image"></label>
</form>

以上、HTMLフォームで任意の画像をラジオボタンとして使用する方法の紹介でした。