10
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

【IE】<label>内の画像<img>がクリックできずイベントを拾わない(ラジオボタン等で使用した画像が反応しない)

何が起きたか

ChromeやFFでは確認できなかったが、IE(11)では
ラジオボタンに画像を使用した際にチェックができない現象が発生

画像部分がクリックできない
WS000008.JPG

form.html
~略~
<link href="/form.css" rel="stylesheet">
~略~
<form>
<div id="hyoka">
<label>好き
<input type="radio" name="hyouka" value="like">
<img src="like.jpg" border="1">
</label>
<label>嫌い
<input type="radio" name="hyouka" value="dislike">
<img src="dislike.jpg" border="1">
</label>
</div>
<input type="submit" value="送信する">
</form>

解決方法

label要素をdisplay:inline-block;にし、画像にpointer-events: none;を付与することで、解決しました。

form.css

#hiyoka label{
    display: inline-block;
    ~略~
}
#hiyoka label img{
    pointer-events: none;
    ~略~
}

IEのバグ?で画像を使われることを想定していないつくりになっているようです。
そこで画像を無効化してラベル自体をボタンにすることで回避できるみたいです。

ただpointer-eventsはIE11未満はサポートされていないみたいなので注意が必要です。
CSS pointer-events (for HTML)

参考リンク

html - Image label for input in a form not clickable in IE11 - Stack Overflow
http://stackoverflow.com/questions/20198137/image-label-for-input-in-a-form-not-clickable-in-ie11

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
10
Help us understand the problem. What are the problem?