Styling form inputs can be a real PITA. Most browsers are very opinionated over how they display certain inputs. Like file uploads. And they almost always look like garbage.
This is 2016! Clients want their upload buttons to match their theme. Not the default browser input.
I had just that problem today when we got feedback from a client wanting to customize the style of the (out of scope) file upload button they added into their design.
Just as I was preparing to write a lengthy response delving into the why and what that goes into overwriting the styles of default input elements, I came across this little tutorial for styling file uploads from Codrops.
It’s quick. It’s easy. And, best of all, it keeps your site accessible.
The tutorial author, Osvaldas Valutis, easily could have left this tutorial at styling the button and people would have been happy, but they also included the how and why to edit it so your input stays within the tab index and highlights for those users needing the accessibility features of their browser.
The only difference I went with is hiding the <input> using clip: rectangle(1px 1px 1px 1px); position: absolute;. A less verbose method for accomplishing much the same that I stole from Jetpack’s hiding of the site title when a logo is used.
A tutorial on how to style and customize file inputs in a semantic and accessible way using the label element and some JavaScript.
Source: Styling & Customizing File Inputs the Smart Way | Codrops
