问题
What combination of CSS or attributes are needed?
回答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
回答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)
回答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.
来源：https://stackoverflow.com/questions/269582/setting-uniform-input-type-file-width-in-all-browsers