Setting uniform <input type="file"> width in all browsers

Question

What combination of CSS or attributes are needed?

Ethelstan

Answer 1

• Hide the actual control
• Made a DIV with the controls and styling you want on top of it

The button is not a standard HTML control.

See: http://www.quirksmode.org/dom/inputfile.html

Pistole

so there's no way to achieve this using the native control itself? – Ethelstan

There is absolutely no need to use opacity - you can simply delegate the click on a display:none element - much simpler and you don't have to take the (varying) input size into account. – Thunderbolt

Browsers don't allow to delegate clicks on file input as a security feature. So, we need the opacity for the hack – Kentonkentucky

Answer 2

what's wrong with

<input type="file" size="50" .... />

? Will look same except safari on mac i guess (on mac, all upload controls looks different, on all browsers)

Heller

input-width does nothing. You may be thinking of input-size, which does change the width, but not in units that you can standardise across browsers. – Manned

This works...it handles firefox..while CSS width propery handles Chrome, IE, and Safari – Martamartaban

If you want to set a more exact size, could use visibility hidden while binary search for the desired size using javascript...! I doubt it's worth it, but I would prefer this rather than hiding the actual control. – Corrales

W3C fails to validate attribute size, because it only allowed on text, search, url, tel, e-mail, or password type of fields. – Catchings

a "file" input looks and smells like an "text" input, so i wonder whats the point of non-validation, really. Yes i know that doesnt act like a "text" but still takes characters and is a box in a pretty same way... – Auld

Answer 3

In addition to the quirksmode tutorial, here's another good resource: http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

If you're hiding the actual control, remember that it is very important to set the opacity of the control to zero, and not actually use visibility: hidden. Doing that will actually hide the element, disabling the click action.

Also, if you're covering up the control with a graphic button, do be aware that in some browsers (Firefox and IE, I believe), you will not be able to change the cursor type to a hand when it's over the text-input part of the file control (it will always default to the input or the regular non-link pointer). And yes, I've tried using cursor: pointer (and cursor: hand).

Personally, I've struggled with customized upload boxes, and there is no silver bullet for getting their appearance or customization perfect. (especially concerning the behavior of the cursor, as I consider that a UI deal-breaker). At the end of the day, I think it's just easier to accept that different browsers will render the control differently, and that's just how it is.

Philemol