Styling File Inputs
File Inputs <input type="file" /> sind notorisch schwer zu stylen und sehen bei jedem OS anderes aus. shauninman.com zeigt eine sehr coole Methode File Inputs ansprechend zu gestalten.
We start with a simple replacement. The custom button image is set as the background-image of our wrapper element and dimensions are set to match.
Next we set the opacity of the file input itself to zero, effectively making it invisible but still clickable (something that can’t be achieved with display: none; or visibility: hidden;).
Finally, the JavaScript keeps the button portion of the the file input underneath the pointer whenever the mouse enters the wrapper element. A class of SI-FILES-STYLIZED (also configurable) is applied to the html element of the page for use as a styling context for compatible browsers.