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

Question

What combination of CSS or attributes are needed?

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

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)

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.