Question

I’ve built an upload button that’s formatted to look like your typical html button, instead of the browser standard file upload form. The approach was to style an anchor element and overlay a transparent file input element on top.

This approach works fine in all browsers but IE. In IE, when the user clicks the upload button a text cursor appears as if the user had clicked on a text input box. The user can trigger the file upload dialog by double clicking the button. But this isn’t the behavior we want or that anyone expects.

I’m at a loss as to why this is happening. I’ve set up a jsfiddle demonstrating the issue here:
http://jsfiddle.net/davelee/yfSmc/3/

Answer 1

Setting the width and height of the file input element fixes the issue in both ie8 and ie9.

http://jsfiddle.net/davelee/yfSmc/4/