HTML・CSS

input要素のlabel(ラベル)がクリックできないときの対処法

この記事ではcheckboxのlabelがクリックできない人向けに、labelのクリックでチェックボックスが反応するようにしていきます。

クリックできないlabel

以下のソースコードの場合、□の中をクリックしないと反応しません。

<input type="checkbox"><label>選択肢1</label>

labelをクリックできるようにする方法2種類

labelをクリックでチェックをする方法には2種類あります。

  1. labelで囲う方法
  2. forとidを使う方法

それぞれ解説します。

1.labelで囲う方法

以下のようにinputをlabelで囲うとクリックができるようになります。とても簡単ですね。

<label><input type="checkbox">選択肢1</label>

2.forとidを使う方法

以下のように、inputにid、labelにforで同じ名前(以下の例ではcheck_box1)をつけると、labelのクリックでチェックボックスの有無が切り替わるようになります。

<input type="checkbox" id="check_box1"><label for="check_box1">選択肢1</label>

labelを分かりやすくカスタマイズ

labelがクリックしやすいようにカスタマイズしていきましょう。

labelマウスオーバーでポインタに

labelにマウスオーバーした際に、指マークになるようにCSSを追加してみましょう。

.check_box2, #check_box2 {cursor: pointer;}
<input type="checkbox" id="check_box2"><label for="check_box2" class="check_box2">選択肢1</label>

labelをおしゃれに

labelをFont Awesomeを使っておしゃれにすることもできます。

詳しい実装方法は、「Font Awesomeでチェックボックスをおしゃれにデザインしてみる」をご覧ください。

labelをボタン風に

labelをcssでボタン風にアレンジして目立たせましょう。

.check_box3 {
  cursor: pointer;
  display:inline-block;
  color:#fff;
  background-color:#50A386;
  padding:5px 10px;
  border-radius:3px;
}
<input type="checkbox" id="check_box3"><label for="check_box3" class="check_box3">選択肢1</label>

このままだとチェックボックスが残ってしまっているので微妙ですね。

チェックボックスをdisplay:none;にして、クリックイベントとして使うととても使い勝手が良くなります。

例えば、「クリックすると画像が表示される」という動作が、CSSだけで実装できます。↓

実装方法を知りたい人は「JavaScriptを使わずにCSSだけでクリックイベントを実装する」の記事を見てみてください。


というわけで、inputのlabelクリックでチェックボックスのON/OFFを切り替える方法の紹介でした。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-HTML・CSS
-

© 2020 ウェブつく Powered by AFFINGER5