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; }