Alan Edwardes

Styling A File Input Using Form Elements

<input type="file"/> is a pretty standard web upload form - but still isn't properly supported by virtually any browser around today. There are varioussites 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.

24th of July 2008 at 9:01 AM

3 years, 10 months ago

written by Alan Edwardes.

222 words

rand: Done. Kinda.

next: Simple Steps To Remove A ...

prev: Last.fm - Out With The ...

share:FacebookTwitterRedditdiggStumbleUpondeliciousHacker NewsLinkedIn

Add a Comment

© 2006 – 2012 Alan Edwardes / code on github
Top