チェックボックスのラベル範囲を視覚的に分かりやすくするCSS - スタイルシートTipsふぁくとりー

《2016年2月29日 10:00 公開/更新》 チェックボックスのラベル範囲を視覚的に分かりやすくするCSS [フォーム,色] HTMLのinput要素を使ってチェックボックスやラジオボタンを作ると、クリック可能な範囲がとても狭くて若干使いにくいですよね。クリック可能な範囲は「チェックボックスやラジオボタンそのもの」だけで、その横に書いた文字列はクリック対象外になってしまいます。 ところが、input要素と併せてlabel要素を使えば、ラベル部分(チェックボックスやラジオボタンに対応する文字列の部分)もクリック可能になります。そうしておく方が、一般的なソフトウェア上のチェックボックスやラジオボタンと操作の感じが同じになるので、ユーザビリティ上も望ましそうです。 以下の2つのチェックボックスは、1つ目は「チェックボックスそのもの」しかクリックできないデフォルトの状態です。文字列部分をクリッ

[mekagazira]

チェックボックス　ラベル

[yuchi]

forの要素、idの要素.

[nilab]

チェックボックスのラベル範囲を視覚的に分かりやすくする - スタイルシートTIPS ふぁくとりー : input type="checkbox" : label:hover {background-color: #ffcccc;}

[gothedistance]

小ネタ重要

[yosshi1202]

文字をクリックする事でチェックボックスのスイッチを入れるようにする。

[mallowlabs]

チェックボックスのユーザビリティを上げる