Input type file size varies in Linux/ Windows

Question

I have an input type="file" element with size="70" and width="522px". It looks and works fine in all browsers on Windows but in Firefox on Linux the input element is bigger than 522 pixels.

Things I tried:

1. max-width:522px but it doesn't work (Linux).
2. setting size="52" and min-width:522px; looks fine in Linux but doesn't work on in Firefox on Windows.

What can I do to specify 522 pixels width?

Answer 1

Specify only CSS width, like this:

<input type="file" style="width: 522px;" ..... />

Answer 2

The problem is that the browser doesn't consider the button as part of the input. So if you have something like:

<div style="width: 500px; overflow: hidden">
<input type="file" id="uploadfile_0" class="fileinput" style="border: 2px solid #a9a9a9; width: 100%; height: 22px;" name="uploadfile_0"/>
</div>

The input button browse is outside the parent, and I don't think there is an easy solution to this.

You can read about styling input type="file" on quirksmode.org

Answer 3

The only way that I've ever seen file input fields styled is through a trick where the field is actually on top of an image and the field is given zero opacity.