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.

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/

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