CSS

IEでlabelタグ内の画像がクリックしても反応しない

今回の事象

フォームの作成で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でしたので今回はこれにて解決です。

related article

2020/04/23 CSS

CSSだけでプルダウンメニューを実装する

2020/02/13 CSS

スクロールバーを非表示にする(各ブラウザ対応)

2019/11/01 CSS

divでぐるぐる回転するボタンを作ってみた

2019/10/27 CSS

レスポンシブで正方形を維持させる