<input type="file"/> is a pretty standard web upload form - but still isn’t properly supported by virtually any browser around today. There are various sites who have come up with solutions to the problem, but I have yet to see a site that allows the styling of real form buttons for use with a file input form.

This led me to playing around with the file input form, and to try and find various possible solutions to the dilemma. The solution I came up with (albeit a method similar to others) was to make the file input transparent using CSS. (If needed, a text box with a button alongside it, allowing javascript to handle the selected file text, and to make the button behave as it would on its own using onmouseover and onmouseout.)

An example of the finished article is here: http://files.alanedwardes.com/

It works exactly as I said above, and I’ve played about with the margins to make the button stay in the middle of the page, whilst having the file input form overlayed on top of it. It is a custom solution too, but if you wanted to include a text box with the text from the file input form in it that would be an easy thing to achieve with js, as the examples above state.