Is there a way to set width of <input type='file'/> for showing in Firefox?

- Stack Overflow 5/30/17, 5)24 PM

x Dismiss

Join the Stack Overflow Community

Stack Overflow is a community of 7.2 million

programmers, just like you, helping each other.
Join them; it only takes a minute:

Sign up

Is there a way to set width of <input type='file'/> for showing in Firefox?

All the CSS attributes apply to the <input type='file'/> don't work on FF, but work on most
other browsers.

Just can't even set the width. Any solution? No JS please.

file firefox input width

edited Mar 14 '13 at 6:35 asked Nov 25 '11 at 8:24

Nandu jondinham
1,712 4 20 41 4,114 8 50 106

3 Answers

Have you set the size attribute?

<input type="file" name="datafile" size="40">

Firefox doesn't support setting the size via CSS.

answered Nov 25 '11 at 13:01

Chris Felstead
1,039 8 17

but attribute 'size' is measured in characters (font & font size dependent), and it's hard to measure
jondinham Nov 25 '11 at 14:12

1 It's still the only way. Other than that, what you are trying to do isn't possible as FF doesn't support it.
Chris Felstead Nov 25 '11 at 14:14

3 This does not work, after selecting a very long file name, it still exceeds the boundaries of the input field.
citizen conn Apr 23 '14 at 21:11

I wouldn't have a clue if anyone still finds this thread, but just in case...

input[type="file"] {
max-width: 100%;
}

...worked for me. Cuts the overlap off, but at least it doesn't over- or underlap anymore

answered Nov 7 '13 at 20:34

https://stackoverflow.com/questions/8266358/is-there-a-way-to-set-width-of-input-type-file-for-showing-in-firefox Page 1 of 2
Is there a way to set width of <input type='file'/> for showing in Firefox? - Stack Overflow 5/30/17, 5)24 PM

Chris
91 1 1

This is the best answer. Adam Jan 12 at 23:37

What if

<input type="file" name="file_to_upload" id="file_to_upload" style="max-width:75px;">

For me works in FF 37.0.1. But possibly in older versions does not work

answered Apr 18 '15 at 1:24

user2118559
739 9 18

https://stackoverflow.com/questions/8266358/is-there-a-way-to-set-width-of-input-type-file-for-showing-in-firefox Page 2 of 2