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

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

この記事の目次

クリックできないlabel

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

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

選択肢1

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

それぞれ解説します。

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

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

選択肢1

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

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

選択肢1

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

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

.check_box2, #check_box2 {cursor: pointer;}

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

選択肢1

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

チェックボックス

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>

選択肢1

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

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

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

画像が表示されるボタン

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

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