File upload button and odd text cursor behavior in

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

try adding css

z-index

to your absolute elements.

lowest element

 z-index:1

highest

z-index:2; 

and set a z-index on the container element.

Answer 2

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

Answer 3

Take a outer div to that input file apply over flow hidden and width to it, then to the input file apply some css like: font-size, margin-left in negative.

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

and the 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-left according to your requirement.

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

Answer 4

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

Answer 5

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

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