Input file not opening File Upload box on IE

Question

I have a label element which, along with its corresponding input type="file", also contains an img sandwiched between two span elements.

The input itself is declared as display:none, allowing the label to do the job of launching the File Upload box when any element inside it is clicked. This, of course, works swimmingly in every major browser except IE. In IE, clicking anywhere inside the label other than the img will launch the File Upload box, but clicking the img will not...

You can see this issue replicated by opening this fiddle in IE alongside any other browser.

Strangely, the issue can be isolated down to the presence of the form. For some reason when the form wrapper is removed the label functions correctly. I obviously can't use this as a solution though. Thoughts?

Answer 1

It is a known bug in IE you can see it in Microsoft Connect

To solve simply add pointer-events: none; to the <img>

It can cause some browsers to highlight the image when being clicked. To avoid that make the image unselectable.

The full solution is:

.selector-for-image {
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

See updated JSFiddle