性別選択ラジオボタンのデザイン

HTMLのデフォルトUIのラジオボタンは以下で表示されるようにフィードバックが弱いため、「何を選択しているのかわかり辛い」「クリックできるエリアがわからない」という問題点がある。

選択肢その1

それを解決させるため、CSSを使って 選択しやすく かつ 選択の状態を理解しやすく させてみた。

性別選択フォーム(ラジオボタン)のデザイン – jsdo.it – share JavaScript, HTML5 and CSS


サンプルとして作成したのは性別を選択するフォーム。
ボタンとして表示させることで、クリックできる範囲を明示的に表示させている。
また男性を選択すると青く、女性を選択すると赤く色付くようになっていて、
どちらを選んだかを色からも判断できるようになっている。

これならユーザも選択ミスすること無く操作することができ、
選択した項目も直感的に理解できるようになるだろう。

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>