monotone blog

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

HTML

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

その際は、デフォルトのラジオボタン(<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フォームで任意の画像をラジオボタンとして使用する方法の紹介でした。

モバイルバージョンを終了