IE 11 Bug - Image inside label inside form

Viewed 11419

In IE11, the following piece of code will check the radio button as expected:

<input type="radio" id="myRadio" />

<label for="myRadio">
    <img src="..." />
</label>

Wrapping a <form> around the above will however break the functionality of the label.

This SO post offers a solution to the problem by styling the image with pointer-events:none, and the label as a block-level element.

While that should of course not even be necessary, it also disables the ability to handle mouse events.

It would be much appreciated if someone can offer a pure CSS solution to this problem.

 

PS:

One thing worth mentioning, is that in IE11, if the image is styled as a block-level element, then pointer-events seems to loose its effects.


7 Answers

It works with

img {
  pointer-events: none;
}
Related