68

The problem

In IE11 the image in the following code is clickable to activate/toggle the input in the label:

<label>
    <input type="checkbox"> some text
    <img src="http://placeimg.com/100/100/any" alt="some img">
</label>

While the image in the this exactly same code but inside of a <form> is not clickable to activate/toggle the input:

<form>
<label>
    <input type="checkbox"> some text
    <img src="http://placeimg.com/100/100/any" alt="some img">
</label>
</form>

(Demo at jsfiddle)

Example

Note that in the example animation above I'm clicking the second image, which doesn't work, but clicking on the text works (just did that to demonstrate).

This was tested and reproduced on:

  • IE 11.0.9600.16428 on Windows 7 Pro SP1 x64.
  • IE 11.0.9600.16438 on Windows RT 8.1 tablet.
  • IE 11.0.9600.17105 on Windows 7 Pro SP1 x64.
  • IE 11.0.10240.16431 on Windows 10

This issue does not occur in IE9, IE10, Microsoft Edge, and other browsers.

Questions:

  1. Can this be solved without JS while still using image tags?
  2. If not, what other possible solutions are there?
  3. (Optional) Why doesn't the image in the second example trigger the input element (while doing it in the first)?

2 Answers 2

114

One way to fix this is with pointer-events: none on the image, and adjusting the label with for example display: inline-block. (pointer-events is supported in IE11.)

label{
    display: inline-block;
}
label img{
    pointer-events: none;
}

(Demo at jsFiddle)

10
  • 2
    If one uses the bootstrap framework, then all images with the class img-responsive get the display:block style. In that case, you need to add an extra line to the label img css. This should be added: display: inline!important.
    – Timo002
    Mar 26, 2015 at 8:17
  • 2
    why does pointer-events:none fix this? Why does the display property of the image matter? This answer does not at all explain what the actual issue is.
    – chiliNUT
    Aug 9, 2016 at 14:41
  • 3
    @chiliNUT: The IE11 bug is that clicking the image element doesn't do what's it's supposed to. By setting pointer-events: none on the image and making the label element at least as large as the image the click is registered on the label element instead, in which case IE does what it's supposed to.
    – Qtax
    Aug 9, 2016 at 14:52
  • 2
    by not do what its supposed to do, what does it do instead? why does cancelling pointer events fix it? What pointer event is taking place that causes it to break?
    – chiliNUT
    Aug 9, 2016 at 15:03
  • 6
    Might be some quirk with my setup, but I also needed label img{position:relative} for IE11 on Windows 7.
    – nvioli
    Jan 6, 2017 at 15:17
8

Is a bit older question, but as its pretty high in google search, I'll post here one more answer that fixes this in all IE versions.

.

The checkbox/radio has to be outside of label, it has to have own unique ID and label has to have attribute for which contains the ID of checkbox/radio its related to:

<label for="my_lovely_checkbox">Hello good friend</label>
<input type="checkbox" value="Hello" id="my_lovely_checkbox">

If you done that and if you use PHP (which you probably are), you can use this piece of code:

if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)) {
    ?>
    <script>
        $(document).ready(function() {
            $("label img").on("click", function() {
                $("#" + $(this).parents("label").attr("for")).click();
            });
        });
    </script>
    <?
}

I know its JS, but there is actually no other fix for =< IE10 without JS usage.

It detects all IE, versions (IE10 and 11 included, have no idea about Spartan tho, i think it does not detect that one).

Ps.: Answer above me does not actually work for IE8, IE9 and IE10. Just so you know.

9
  • This bug was not present in IE10 when I tested, as I wrote in the question. Are you stating that IE10 also has this bug? Demo?
    – Qtax
    Apr 13, 2015 at 10:34
  • @Qtax Its still there. i tried it right now in chrome and IE10. Works in Chrome, does not in IE10: jsfiddle.net/v4rz346s But you have to have IE set to Edge and not IE 10 (in F12 -> Emulation menu). Problem is, that Edge is set as default, so unless user changes that to IE10, it won't work. Apr 13, 2015 at 12:27
  • Tested your (and my original) example in IE10 (real IE10 in a VM), can click on images just fine. No bug there. So you are probably doing something wrong with your testing.
    – Qtax
    Apr 13, 2015 at 14:18
  • What do you mean by real IE10? I have real IE10 installed on my Win 7 PC. If you push F12 and go to Emulation tab. Whats your document mode? For me its Edge (Default). Works only when I select 10. And as Edge is default, it should not work for everybody. And even if it works in IE10, the answer you got provided works ONLY in IE 11 as you can see here: caniuse.com/#feat=pointer-events Apr 13, 2015 at 16:00
  • 1
    By real IE10 I mean not emulated in some other IE version. I have a clean windows 7 VM with IE10. The only thing I do is open the link you (and I) posted, and I can click on the images to select the options (and checkboxes). Which means no bug. At least not in the normal case, when not messing with F12 and emulation options.
    – Qtax
    Apr 14, 2015 at 11:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.