CODEWITHSUNDEEP
htmlcssinternet-explorer-11
Qtax
Qtax

Reputation: 33908

Image label for input in a form not clickable in IE11

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:

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)?

Upvotes: 68

Views: 49419

Answers (2)

MiChAeLoKGB
MiChAeLoKGB

Reputation: 805

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.

Upvotes: 8

Qtax
Qtax

Reputation: 33908

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)

Upvotes: 114

Related Questions