IE 11 Bug - Image inside label inside form - html

Question

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.

Answer 1

My markup looks like this (classes and other superfluous attributes removed):
<li>
<label>
<figure>
<img>
</figure>
<div>
<label></label>
<input type="radio">
</div>
</label>
</li>
It's a bit messy because some of it is auto-generated by Drupal. It didn't work in IE 11, but I made it work by adding:
img {
pointer-events: none;
}
I didn't need to change anything else and I have no other special css-trickery that I can see.

Answer 2

As I answered previously in the referred question, there is a pure CSS way.
If your image is display: block that fix can still be used, even tho you have to add some more trickery. For example:
CSS:
label img{
display: block; /* requirement */
/* fix */
pointer-events: none;
position: relative;
}
/* fix */
label{
display: inline-block;
position: relative;
}
label::before{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
HTML:
<form>
<label>
<input type="checkbox"> some text
<img src="http://placekitten.com/200/200" alt="kitten!">
</label>
</form>
Fiddle
If the problem is with click handlers on the image it self, you may be able to solve that with a wrapper element on the image instead (which maybe the label, so no extra element may be needed). (But for that I'd like to see a more specific example that you are trying to do.)

Answer 3

img {
pointer-events: none;
position: relative;
z-index: -1;
}
This solved it in my case.
The img will be placed behind the label but "shine through".
I hope it helps.

Answer 4

You can put the image in the background of the label..
<label for="myField1" ><img src="image1.jpg"></label>
becomes
<style>
#lblMyField1 {
background-image: url('image1.jpg');
background-position: center center;/* depend..*/
background-repeat: no-repeat;
}
</style>
<label id="lblMyField1" for="myField1" > </div>

Answer 5

This is a rather interesting find. I'll do a bit more research to determine whether or not I can identify a more root cause, but for the time being I have a couple suggestions.
Nest Your Input
<label>
<input />
<img />
</label>
This is a common convention used for associating inputs with labels. Given the input and the label are both inline, this doesn't affect the actual layout necessarily.
JavaScript Patch
Another option is to perform a click on the corresponding input when one didn't happen naturally. In this approach we setup a timeout to click after 100ms. Any click that happens otherwise will clear our timeout:
$("label[for]").each(function () {
var timeout;
var element = $("#" + $(this).attr("for"));
$(this).on("click", function () {
timeout = setTimeout(function () {
element.click();
}, 100);
});
element.on("click", function () {
clearTimeout(timeout);
});
});
Browsers that already work will clear the timeout, preventing a second click. Internet Explorer 11 will click via the timeout.
Demo: http://jsfiddle.net/CG9XU/
One caveat is that that solution only works for labels that were on the page when the case was ran. If you have forms coming in late (perhaps via ajax), you'll need to listen higher up on the DOM. The below example listens on the document level:
$(document).on("click", "label[for]", function () {
var timeout;
var element = $("#" + $(this).attr("for"));
timeout = setTimeout(function () {
element.click();
}, 100);
element.one("click", function () {
clearTimeout(timeout);
});
});
The label element accepts as its content type all phrasing elements, and this includes image elements. I'll keep looking into this, and will update this answer with any insight.

Answer 6

Here is a solution that worked for me using pointer-events:none without having to set my image to position:relative as I needed it to be position:absolute for my design.
HTML
`<form>
<input id="radio-button-action" type="radio" name="search" value="open">
<label for="radio-button-action">
<div class="img-wrapper">
<img src="images/image.jpg" alt="image">
</div>
</label>
</form>`
CSS
So in this example we have an image that needs to be position: absolute
img {
position: absolute
top: 10px;
right: 10px;
height: 25px;
width: 25px;
display: inline-block; /* can be block, doesn't matter */
}
Now set pointer-eventson the img-wrapper div
.img-wrapper {
position: relative /* this is required for this to work */
pointer-events: none /* this is what will make your image clickable */
}

Answer 7

It works with
img {
pointer-events: none;
}