今回の事象

フォームの作成でlabel要素を使用し、label要素内をクリックエリアにすることはよくあることだと思いますが、今回そんな中で気づいた事象です。

テキストや画像をクリックエリアにし、そこをクリックするとチェックボックスにチェックがつくという仕様のフォームを作成したくて、labelタグの中にpタグとimgタグを入れました。

デベロッパーツールで見てみると確かにlabelタグのエリアはpタグもimg要素も含まれていました。

chromeだと画像部分をクリックすると問題なくチェックボックスにチェックが入るのですが、IE11だとなぜかimg要素のエリアをクリックしてもチェックボックスにチェックが入りません。

つまりクリックに反応していませんでした。

解決策

IEの仕様なのか何なのか、labelに画像を使用することが想定されていないようです。

解決するためのCSSのコードは、label要素に対して以下を指定。


label{
  display: inline-block;
}

labelタグ内のimg要素に対して以下を指定します。


label img{
  pointer-events: none;
}

この2行を記述すると画像部分をクリックしてもチェックボックスにチェックが入るようになりました。

今回参考にさせていただいた記事はこちらです。ありがとうございました。

こちらの記事に記載がありましたが、「pointer-events」はIE10以下はサポートしていないようなのでご注意ください。

今回の対象ブラウザはIE11でしたので今回はこれにて解決です。