ホーム（記事一覧）へ

CSS checkedやlabel forが効かない原因と修正方法

フォームを作るときlabelをクリックすることでinputタグにcheckedがつきCSSで調整できると利用しやすいですよね。

labelをクリックしてもinputタグが反応しない？checkedがつかない？

そんなときに見直す箇所をまとめました「CSS checkedやlabel forが効かない原因と修正方法」を説明します。

完成形イメージ

下記のようにlabelをクリックしたらinputのcheckboxが反応しlabelのデザインが変わるボタンを作りたいとします。

<style>
.example + label{
    padding: 10px;
    display: inline-block;
    cursor: pointer;
    background: #c4d3f5;
}
.example:checked + label{
    background: #f0b3c4;
}
</style>
<input type="checkbox" id="aaa" class="example"><label for="aaa">クリック</label>

このように「クリックされた」ことを条件にする場合「:checked」をつけてCSSを指定できます。

input checkedが効かないとき

inputにcheckedをつけて確認してみる

まず初めにinputタグにcheckedをつけて確認してみましょう。

下記のようにinputタグに「checked」を付け加えるだけです。

<input type="checkbox" id="aaa" class="example" checked><label for="aaa">クリック</label>

checkedをつけたときに思った通りのデザインになるかならないかで対応が変わります。

思った通りのデザインにならなかったとき

checkedをつけた結果思った通りのデザインにならなかった場合、CSSを間違えている可能性があります。

セレクタの優先度、セレクタの書き方など確認しましょう。

とくにセレクタの「+」や「:checked」は普段使う機会が少ないため間違えやすい部分です。このあたりは要確認しましょう。

CSSセレクタ一覧【使い方例あり】
主要ブラウザで使えるセレクタ等の一覧です。主要ブラウザで使えるセレクタ等の一覧です。CSSの記述例と実行例もあります。
この記事を読む

セレクタ間の空白スペースを間違えている

「+」は「.example + label」のように前後に空白を入れてもいいですが、「:checked」は「.example :checked」のように空白を入れてはいけません。別の意味になります。

CSSセレクタ、classにおける空白スペースの意味
CSSのセレクタにおいてスペースは重要な意味を持ちます。CSSセレクタ、classにおける空白スペースの意味を解説します。
この記事を読む

input以外に「:checked」を指定しようとしている

「:checked」は基本的にinputだけが使えます。

aタグなどに指定しようとしている場合効きません。

思った通りのデザインになったとき

checkedをつけた結果思った通りのデザインになった場合、labelがちゃんと押せていないか、labelとinputがきちんと結びついていない可能性があります。

下記「label forが効かないとき」を確認してください。

label forが効かないとき

labelをクリックしたときにinputがcheckedされるようにするにはlabelとinputを結び付ける必要があります。

結び付けるにはinputにidで、labelにforで同じ値を指定する必要があります。

<input type="checkbox" id="aaa"><label for="aaa">クリック</label>

label forが効かないときは下記のような状態になっている可能性があります。

id、forを間違えている

下記のようなミスをしていないか確認しましょう。

  • inputにfor、labelにidを指定している
  • inputとlabel両方をidにしている
  • inputとlabel両方をforにしている

間違った例

×<input type="checkbox" for="aaa"><label id="aaa">クリック</label>
×<input type="checkbox" id="aaa"><label id="aaa">クリック</label>
×<input type="checkbox" for="aaa"><label for="aaa">クリック</label>

正解例

○<input type="checkbox" id="aaa"><label for="aaa">クリック</label>

labelのforとinputのidが一致していない

基本中の基本ですが、labelのforとinputのidの記述は一致している必要があります。

意外とスペルミスしていたり数字がずれていたりするものです。落ち着いてソースを見直してみましょう。

間違った例

×<input type="checkbox" for="aaa"><label id="bbb">クリック</label>

正解例

○<input type="checkbox" id="aaa"><label for="aaa">クリック</label>

inputのidが2か所あり値が同じになっている

同じidの指定が2か所あると一方は効かなくなります。

<input type="checkbox" id="bbb"><label for="bbb">クリック1</label><br>
<input type="checkbox" id="bbb"><label for="bbb">クリック2</label>

上記の場合、下の「クリック2」をクリックしても上の「クリック1」が反応してしまいます。

コピペでソースを書いているときに陥りやすいミスです。

ソース内で検索をかけて重複している箇所がないかチェックしましょう。

radioボタンの場合はnameでも同じ指定になっていると効かなくなります。よく確認しましょう。

【別案】labelの中にinputを含めてしまう

そもそもforもidも使わない方法にしてしまおうという話です。

<label><input type="checkbox">クリック</label>

labelの中にinputを含めてしまうことでforもidもいらなくなります。

これで「forが効かない!?」と悩む必要がなくなりますし、ソースコードもシンプルになりミスが減ります。

まとめ

input checkedが効かないとき

→inputにcheckedをつけて原因の切り分け

  • 変化がないとき→CSSの見直し
  • 変化があるとき→labelとinputが結びついているか確認

label forが効かないとき

  • id、forを間違えている
  • labelのforとinputのidが一致していない
  • inputのidが2か所あり値が同じになっている

以上、CSS checkedやlabel forが効かない原因と修正方法でした。

関連記事