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

HTML

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

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

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

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

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