arrow_back

-webkit-appearance your little known friend

Paul Kinlan December 03, 2010

... and other things

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

Copyright © 2015 - Paul Kinlan