Formatting Issues With File Input Element

The HTML file input element is extremely difficult to format. It consists of a text input field for the filename, a "Browse" button, and a text label displaying the file that was chosen after a file has been chosen. It is not possible to make it just a button with the other elements. To make things worse, it is not possible to bring up the file browsing interface to pick a file via any other HTML element.

The only way to have an upload button that looks and functions purely as a button is as follows:

• Hide the file input button by setting opacity to 0.
• Put the button in a div with "overflow: hidden",
• Set the button to a large size and absolute position to top-right (this also means that the parent div has to be a positioned element).
• Have a regular image/button or a background image in the same place to serve as the image for the button.

What this does is:

• Only the button of the file input element is clickable. The rest of it has overflowed to the left into the hidden area of the parent div. (This fixes a mouse styling issue).
• The button is not visible due to opacity. User only sees the image drawn on top of it.

However, it is not possible to style the mouse cursor to the "hand" pointer.

References:

• http://www.quirksmode.org/dom/inputfile.html
• http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom