CODEWITHSUNDEEP
htmlcssinternet-explorer-11
Mark
Mark

Reputation: 1093

IE 11 Bug - Image inside label inside form

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.

Upvotes: 23

Views: 11631

Answers (7)

Mo.
Mo.

Reputation: 27445

It works with 

img {
  pointer-events: none;
}

Upvotes: 0

Pajama_Jeans
Pajama_Jeans

Reputation: 59

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 */
}

Upvotes: 0

danfuel
danfuel

Reputation: 21

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.

Upvotes: 2

Alessandro Marchisio
Alessandro Marchisio

Reputation: 545

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" >&nbsp;</div>

Upvotes: 1

TwiiK
TwiiK

Reputation: 101

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.

Upvotes: 9

Qtax
Qtax

Reputation: 33908

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

Upvotes: 7

Sampson
Sampson

Reputation: 268334

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.

Upvotes: 0

Related Questions