File upload button and odd text cursor behavior in IE

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

Meet this bug on IE11, fix it with font-size: 0;

Answer 2

I have just worked on this exact issue. With IE, yes, there is a small area on the left of the button that acts as a text input (for the file name to be entered manually). The solution that I figured out was to increase the font-size of the input field. Strange, I know, but by increasing the font-size, you increase the "Browse..." button portion of their input field, and therefore increase the clickable area and push out the text portion of their upload button. Since the button is transparent anyway, nobody is the wiser :)