HTMLフォームのチェックボックスとラジオボタンの使いやすさを向上させるためのアイデア

Question

重複の可能性：
カーソルがラジオボタン、チェックボックス、それらのラベルの上にあるポインターに変わりますか？

私の問題は、HTMLのフォームコントロールの小さなチェックボックスとラジオボタンが小さすぎてクリックしにくいことです。また、いくつかの本当にハッキーな方法に頼らずにそれらのサイズを大きくすることは簡単ではありません。

私が通常行うことは、チェックボックスのラベルにfor = "idOfCheckbox"属性を指定して、ラベルをクリックすると、チェックボックスが選択されます。

さて、私は使いやすさをもう少し改善するかもしれない別のアイデアを持っていました：

.items label {
    cursor: pointer;
}

これは、CSSを少し追加して、ラベルの上にマウスを置いたときにマウスカーソルを変更します。通常のブラウザでは、これは手/指のポインタアイコンに変わります  ラベルをクリックしてチェックボックスを選択できることをユーザーに知らせる必要があります。私はセットアップしました ここであなたが試すための小さなデモ 。

私の考え：

• ハイパーリンクの場合、通常は青色になり、カーソルを合わせると下線が引かれるため、ハイパーリンクとは区別されます。
• マウスポインターの基本的な矢印よりもわかりやすいと思います  ラベルの上にカーソルを合わせると、それが単なる基本的なテキストであり、最初に試してみて、その可能性に気づかない限り、クリックできませんでした。一部のWebサイトではラベルをクリック可能にしていますが、悪いラベルではクリックできないので、通常は試すまでわかりません。
• マウスオーバーするとボーナスが追加され、チェックボックスが水色に点灯するので、ラベルをクリックできるようになります。マウスアイコンを基本的な矢印として残し、チェックボックスを青色に点灯させるだけの問題は、ユーザーがラベルをクリックできることに気づき、即座にそれを知ることは、それ自体がかなり微妙なことです。

とにかく、UXの専門家から意見をもらえると思いましたが、それは良い考えですか、悪い考えですか？

解決策：チェックボックスは、ラベルタグがチェックボックスをdisplay: blockとラベルの周りに少しパディングを追加して、クリック可能な領域を増やします。次に、マウスをホバーすると、マウスアイコンが  ラベルの背景色も変化して、選択されていることを示します。テーブルの行全体を選択可能にする方法もわかりました。 デモはこちら 。

Answer 1

ボックスだけでなく、チェックボックスとそのラベルの間の領域も（タッチスクリーンの場合など）熱くなっているかのように使用できません。 FWIW、OS X 10.8.2のSafariでは、ボックスまたはホバー時のラベルについて説明したように強調表示は表示されないため、デモではカーソルの変更のみが示されます。常に環境を制御できるわけではないので、覚えておくべきこと... [または私が間違っている可能性があります]