Search code examples
cssinternet-explorerfile-uploadopenfiledialog

File input behaviour in IE

I have noticed a difference in behaviour between chrome and IE of handling file input clicks.

jsFiddle example here.

In Chrome, clicking anywhere on the input (text or button bit) triggers the file dialogue.

In IE (testing on 7), you have to click on the actual button, not the text bit.

The problem is that I'm using a transparent file input on top of a regular text box. Clicking on the text box should open the dialog. In Chrome this is working fine, as the total size of the input is the same size as my text box.

In IE it doesn't work properly as the user needs to be clicking on the actual button part of the transparent file input.

Any ideas of how to fix this??

Thanks

Solution

  • You need to find a way to trigger a click event on the file input box..

    Maybe adding a click handler on the underlying textbox which issues the click event to the file box.

    example: http://jsfiddle.net/MqbrV/

    It does not work in Firefox (but the default action should be enough) and Opera (where none works).