Styling the File Input with CSS and Javascript

This solution is the work of Shaun Inman over at www.shauninman.com.

Basically the solution involves 4 simple steps:

1. We wrap the input with a label tag.
2. We assign a background image to the label tag and apply some dimensions.
3. We hide the input tag using CSS opacity rather than "visibility" or "display" (this ensures that the input is still clickable)
4. Javascript is used to ensure that the button of the file input is always positioned exactly underneath the cursor.

 I'm not going to go over the details here, but if you want to see exactly how it's done you can read the original tutorial or see the demo. Great work Shaun!