File download button and odd text cursor behavior in IE

Question

I created a download button that is formatted to look like a regular html button, rather than a standard browser file upload form. The approach was to create an anchor element and overlay a transparent file entry element on top.

This approach works fine in all browsers except IE. In IE, when the user presses the download button, a text cursor appears, as if the user had clicked on a text input field. The user can open the file download dialog by double-clicking on the button. But this is not the behavior that we want or expect.

I do not understand why this is happening. I installed jsfiddle demonstrating the problem here: http://jsfiddle.net/davelee/yfSmc/3/

Answer 1

Setting the width and height of the file input element fixes the problem in both ie8 and the .9 file.

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

Answer 2

I just worked on this exact issue. With IE, yes, there is a small area to the left of the button that acts as text input (for manually entering a file name). The solution I found out is to increase the font size of the input field. Strange, I know, but increasing the font size, you increase the portion of the "Browse ..." button in your input field and, therefore, increase the area with the possibility of a click and pop out the text part of your download button. Since the button is transparent anyway, no one is wiser :)

Answer 3

Meet this error in IE11, fix it with the font size: 0;

Answer 4

Take the external div for this input file, applying the stream and width to it, then apply some css to the input file, for example: font-size, margin-left in negative.

<div class="outerWrap"> <input type="file" id="fileUpload"/> </div> 

and css will be:

 .outerWrap { width: 200px; height: 50px; overflow: hidden; } #fileUpload { width: 210px; height: 50px; margin-left: -10px; font-size: 70px; } 

adjust the width and margin on the left to suit your requirements.

for reference I got this link: http://jsfiddle.net/TrdJ8/ and try it on IE-9

Answer 5

try adding css

z-index

to your absolute elements.

bottom element

  z-index:1 

highest

 z-index:2; 

and set the z-index in the container element.