When clicking on the text box part of an <input type="file" /> in FireFox3, a file browsing window opens.

This doesn't happen in IE7. You have to click the "browse" button to open the file browsing window.

How can I prevent the file browsing window from opening in FireFox when a user clicks on the textbox area? I'd like it so it only opens when the button is pressed.

When clicking on the text box part of an <input type="file" /> in FireFox3, a file browsing window opens.

This doesn't happen in IE7. You have to click the "browse" button to open the file browsing window.

How can I prevent the file browsing window from opening in FireFox when a user clicks on the textbox area? I'd like it so it only opens when the button is pressed.

• javascript
• css
• file
• input

6 Answers 6

Why can't you leave expected behavior alone? Most people who use FireFox will expect it to happen. Unless there is an actual "design" reason that you did not state for making this happen please don't try and change it.

Firefox behaves this way in order to prevent an exploit using the file input.

See the end of this blog entry and some of the comments below.

I agree that it is very annoying, not as a website designer/developer but as a user of Firefox; sometimes I just want to paste a filename and not have to click through the dialogs.

How can I prevent the file browsing window from opening in FireFox when a user clicks on the textbox area?

Obscure it with another element.

<div style="position: relative">
    <input type="file" />
    <div style="position: absolute; top: 0; left: 0; width: 11em; height: 2em;"> </div>
</div>

But don't do this. It's awfully brittle and will break in many circumstances.

I'd like it so it only opens when the button is pressed.

I doubt your users would like it, though. It removes expected functionality from the browser, and doesn't replace it with anything better. Or indeed anything at all.

Even if you really would want to do that, i don't think it is possible.

Yes it does, and there's nothing that a webpage can do about it.

I'm not aware of a FF config setting that would control this, so you're stuck with #3:

With an extension it might be possible to change this behavior, but then you'd have to get your users to install your extension (may be feasible for an internal app) and cope with the bugs it might introduce into the application.

Would a simple workaround not be to create a text input field and also a button, with the button being used to trigger the file browser and then populate the info back into the text field? I'm fairly new to all this and am reading a lot of issues on this problem, including the fact that FF3 doesn't apply the same css styles to the input=file as it did in previous versions.