How to style a File Upload Button in CSS

One of the most annoying things in my opinion when it comes to web design is when we are creating a beautiful form, with nice images for buttons, clean text fields, but there is an eye sore of a file upload field. The reason this is an eyesore is because typically you can’t style file browse buttons and fields like you can with other buttons and text fields. They behave and style slightly different. After searching and fiddling for a while we get to something that works, like below for example. This gives some attractive theme to the button and makes it good to use.

Figure 1: Result of our article.

There are several methods around this issue, many use javascript, some are CSS only, others use a combination of the two. The solution we used above is in pure in CSS. Actually that’s not entirely true. There is one ‘onChange‘ event on the file browse button, but it’s an extremely simple line of code, shouldn’t confuse anybody or make your code sloppy at all.

The way this method works is easy. Normally we take a normal file browse field and make it transparent by playing with its opacity. Then we create a plain text field and button side by side. The transparent file field gets placed directly on top of the text field and button so that when the user thinks they are clicking the ‘pretty‘ button, but they’re really clicking on the transparent file browse field.

The placement of one field on top of the other is achieved by using the CSS z-index and positioning properties. In this example the pretty button is actually a background image of the container div. The javascript comes in to complete the effect of the file browse field. When a file is selected from the file system, the file field would normally display the path to this file. We used an ‘onChange’ event to copy the path of the file from the transparent file field to the visible text field.

Thesis applies its own style to comment submit buttons, but some users prefer to use the browser’s default style for this. To restore the browser’s default style to the comment submit buttons in Thesis, place the following code in custom.css:

Listing1: Code to restore the browser’s default style

/* Restore Browser's Default Submit Button Style */
.custom #commentform input.form_submit {
	background:ButtonFace;
	color:ButtonText;
	border:2px outset ButtonFace;
}
.custom #commentform input.form_submit:active {
	border-style:inset;
	-webkit-appearance:push-button;
}

It seems that it's quite simple to style the buttons on your page... until you get to the browse button. The browse button never changes and this makes the task even more complex but let’s takes a look at the solution for the same.

First you are going to make 2 buttons. One of them will be the button that you want people to see, and the other will be the regular browser button. Make sure you place them in that order and do not put a line break in between.

Listing2: Code displaying the attributes of Browse button

<input type=”button” value=”Open File”>
<input type="file">

Next give the "pseudobutton" (the button you want to see) the style you want. you also want to assign layers to each button with "z-index". The pseudobutton should be z-index:1 and the browse button should be z-index:2

Note: The browse button is smaller than the usual button. For best results, resize the pseudobutton to match the browse button (width:75px; height:20px). You will have to resize the font too.

Next: You want to move the browse button OVERTOP of the pseudobutton. It should be covering it exactly. In IE you can remove the borders and the change the width to 0 to move it. In other browsers it doesn't appear the same.

When you set the position of the browser button, set it EXACTLY over the pseudobutton, then in an IF comment you can set IE properties.

Now that your buttons are positioned, you need to make it so that you can see the pseudobutton. All you need to do is change the opacity (transparency) of the browse button to 0. This enables you to see through the browse button as if it was invisible, but letting you still click on it.

Listing3: Code displaying opacity of the browse button to 0

<style type=”text/css”>
input.hide
    {
  position:absolute;
  left:-137px;
  -moz-opacity:0;
  filter:alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
    }
input.red
    {
  background-color:#cc0000;
  font-weight:bold;
  color:#ffffff;
  z-index:1;
  width:75px;
  height:20px;
  font-size:10px;
    }
</style>
<!--[if IE]>
    <style type="text/css">
    input.hide
  {
      position:absolute;
      left:10px;
      -moz-opacity:0;
      filter:alpha(opacity: 0);
      opacity: 0;
      z-index: 2;
      width:0px;
      border-width:0px;
  }
    </style>
<![endif]-->
<body>
<input type="button" class="red" id="pseudobutton" value="Open File">
<input type="file" class="hide" id="openssme">
</body>

For added style to complete the button and make it all convincing, you need to make the button invert, like a normal button does. You will need a little piece of javascript for this.

First give each button an ID. Then you will use the javascript to change the border-style of the pseudobutton, when clicking on the browse button.

Listing4: Code to change the border-style of the pseudobutton

<script type="text/javascript">
function buttonPush (buttonStatus)
  {
  if (buttonStatus == "depressed")
document.getElementById("pseudobutton").style.borderStyle = "inset";
  else
document.getElementById("pseudobutton").style.borderStyle = "outset";
  }
</script>

Make sure you add the appropriate javascript in with the button to make it call the function!

Listing5: Javascript added to call the function

<input type="file" class="hide" id="openssme"onmousedown="buttonPush('depressed');" onmouseup="buttonPush('normal');"onmouseout="buttonPush('phased');">

Conclusion