html - File upload button and odd text cursor behavior in IE - Stack Overflow 5/30/17, 5)26 PM

x Dismiss

Join the Stack Overflow Community

Stack Overflow is a community of 7.2 million

programmers, just like you, helping each other.
Join them; it only takes a minute:

Sign up

File upload button and odd text cursor behavior in IE

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/

html css internet-explorer file-upload

asked May 17 '12 at 20:46

Dave Lee
259 4 17

what version(s) of IE are you testing with? Spudley May 17 '12 at 20:49

it's because <input type="file />" is different browser to browser. When you try to put something on top
of it, you're actually clicking the text field Adam Sweeney May 17 '12 at 20:49

This happens in IE8 and IE9. Dave Lee May 17 '12 at 20:50

This link provides a working example for all browsers (right back to Netscape 4):
quirksmode.org/dom/inputfile.html Spudley May 17 '12 at 20:54

Maybe instead of using the default file upload dialog input you just use JavaScript to prompt the dialog to
open on click. Check this thread out. stackoverflow.com/questions/6292825/ Kris Hollenbeck May 17 '12
at 20:55

5 Answers

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

answered Apr 5 '13 at 20:01

Ryan Battles
61 1 3

Thanks, this is all that was needed in my case, perfect! Elise Oct 4 '13 at 13:13

https://stackoverflow.com/questions/10643270/file-upload-button-and-odd-text-cursor-behavior-in-ie Page 1 of 3
html - File upload button and odd text cursor behavior in IE - Stack Overflow 5/30/17, 5)26 PM

Meet this bug on IE11, fix it with font-

size: 0;

answered Apr 18 '16 at 12:24

Experimenter
177 1 10

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

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

answered May 18 '12 at 16:05

Dave Lee
259 4 17

I've added to your fiddle document.getElementById('fileUpload').focus(); and cursor is visible on IE.

Giedrius Dec 10 '15 at 8:02

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

edited Jun 2 '14 at 14:17 answered Jun 2 '14 at 13:57

user3519851
11 2

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.

answered May 17 '12 at 22:30

https://stackoverflow.com/questions/10643270/file-upload-button-and-odd-text-cursor-behavior-in-ie Page 2 of 3
html - File upload button and odd text cursor behavior in IE - Stack Overflow 5/30/17, 5)26 PM

Rob Sedgwick
4,337 3 9 30

https://stackoverflow.com/questions/10643270/file-upload-button-and-odd-text-cursor-behavior-in-ie Page 3 of 3