Styling an input type=“file” button

Question

How do you style an input type=\"file\" button?

Answer 1

Don't be fooled by "great" CSS-only solutions that are actually very browser-specific, or that overlay the styled button on top of the real button, or that force you to use a instead of a , or any other such hack. JavaScript IS necessary to get it working for general usage. Please study how gmail and DropZone do it if you don't believe me.

Just style a normal button however you want, then call a simple JS function to create and link a hidden input element to your styled button.

Styled upload button!

Notice how the above code re-links it after every time the user chooses a file. This is important because "onchange" is only called if the user changes the filename. But you probably want to get the file every time the user provides it.