Firefox 4 file input width bug?

Question

3I'm changing the width of a file input HTML tag:

<input type="file" id="newFilename" name="Filename">
input[type="file"] {width:380px !important}

In Firefox 3, Chrome and Safari it works perfectly.

In Firefox 4 I cant get it to work. The width remain the same!

Demo: http://jsfiddle.net/LwzW9/1/

Checking with Firebug I noticed that the size of the <input> changes, but I don't really see the changes: (see image)

Any ideas? Is this a known bug?

Thanks.

Volga

Do you have any HTML we could look at? – Conchaconchie

Answer 1

I had the same problem when using uniform.js, this kind of solves the problem:

<input type="file" size="X">

or

$('input[type="file"]').attr('size', 'X');

where X is a number of characters that you define. You should also have the correct width in your CSS for safety in other browsers.

Fiddle: http://jsfiddle.net/EfntV/

Duplet

Answer 2

I notice that you have

width: 380px !important; //line 94

This would override the value of #newFilename {width:280px}

Note I'm not 100% sure about how it works since you're using a much more specific CSS selector to change the width. Would need some sample to look at

Conchaconchie

#newFilename {width:280px} was just to give you an example. It does't really matters if its 280px or 380px !important or 1999px !important. The input size never changes. (note: answer updated to prevent confusions) – Volga

ahh ok. Can you set reproduce the problem on a fiddle or something? Might help to establish whether it's a common issue or specific to your app – Conchaconchie

@Jonathan I could have set that up too :) What I meant was specific to your project. Apart from how the field is rendered, I can confirm that both have the same width : jsfiddle.net/jomanlk/LwzW9/6 – Conchaconchie

@JohnP: Right :) I mean, if you open it in Chrome you can click anywhere in the 380px input and the 'choose file' window will open. In FF4 you need to click right on the rendered field or button. This is a problem because I need a bigger clickable input... so there is a bug right? – Volga

@Jonathan I don't think it can be classed as a bug per se. Browsers have never been standard in the way they implement the file field button. You might need to go for a JS solution if you need it standard – Conchaconchie

not a bug, try this post for more and some solutions: #270082 – Hiro