Remember years ago, when you styled your site up just the way you wanted and then you included a < input type='file'> and then everything went to pot. You couldn't style it up, so you had to hide it, create your 'button' and then simulate a click via javascript to get it to open. Well, I say years ago, nearly every browser today still can't style the system provided buttons.
Webkit provides a bit of a 'hack' (well, I call it a hack) that allows you to style these hidden elements through the use of special Webkit specific CSS selectors and extensions. But back to the subject. If you use < input type='file' >, how do you style the OS button? There are two selectors you need, the first is a standard input[type='file'] selector. This allows you to change the basic appearance of the text and colours for example:
input[type="file"] { color: white; margin: 0px; }
The second selector is ::-webkit-file-upload-button, this gives you direct access to the OS button. Once you are in there you can do a couple of things. You can change its color or font. You can also change its appearance, and what I mean by this, is that you can change it to look like something a lot different. In the following example, I am changing the appearance to be a square button rather than the default circle button on OSX, it is a very simple and subtle change. There are a lot of different appearances an element can take; I could even make it look like a radio-button (hmm).
::-webkit-file-upload-button { -webkit-appearance: square-button; }
I lead the Chrome Developer Relations team at Google.
We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.
Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.
I love to learn about what you are building, and how I can help with Chrome or Web development in general, so if you want to chat with me directly, please feel free to book a consultation.
I'm trialing a newsletter, you can subscribe below (thank you!)
