Lynda Lynda - 5 months ago 10x
Javascript Question

Styling an input type="file"

I have read about this from several places.

I have tried the method found here:

I could not get it to work. So I tried a CSS/HTML method and it works beautifully in Firefox, Chrome, Safari, and Opera (all latest versions) but does not in (you guessed it) IE8.

It looks fine, when you single click it, it doesn't work. If you double click it it works.

Any ideas how to get this to work with a single click?

Currently I am using IE conditional comments to tell users with IE to double click the select button. The site is currently in design and not live to users yet and would like to solve this issue before it goes live if possible.

Here is the page -

Thanks for any and all help!


I think I found two solutions to your problem. You are using: filter:alpha(opacity: 0) on your .file class, thus hiding the actual "Browse..." button you usually see in upload controls.

The first solution would be to use a conditional to set the CSS that will replace your fancy "Select" image with the normal yet styled "Browse" button when the user is using IE.

The second one would be to play with the size of the FileAttachment input and so the hidden "Browse..." button would fit in the position of the "Select" image. From there you just have to make sure that the z-index property of the button is higher than the one of the image.

Let me know if these solutions solve your needs.