Webdev Recipes - Styling a File Input

Problem: You want to customize the appearance of a file input.

Solution: Style a label instead, and place the input offscreen.

File inputs cannot be fully styled with css. Additionally, their behavior varies between browsers and operating systems. While on Mac OS X clicking on any part of the file input will trigger the file picker, in Windows, clicking on the text part of the input will focus the input so you can type the file name.

IE 8 on Windows
Safari on Mac OS X

One common technique is to place the input over a div or span that you style, and then make the input transparent. This tends to work, but can problematic if the button is larger than the button in the file input; if the user clicks on the wrong region, nothing will happen. This recently has caused some problems with Internet Explorer 10 on Windows 8 since the dimensions and layout of the file input changed.

An alternative approach is to make use of a label tag. If a label tag has a for attribute, then clicking on the label will trigger the associated input.

<label for='upload' class='upload-button'>Upload</label>
<input type='file' class='upload-button' id='upload'/>

Now a custom style may be applied to the label, and the input can be placed offscreen:

label.upload-button { 
  font-family: sans-serif;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #666;
  background: #ccc;
}


input.upload-button {
  position: fixed;
  left: -8000px;
}

This will work in Internet Explorer 8, 9, and 10 as well as the Webkit browsers. Unfortunately clicking the label will do nothing in Firefox. To work around this issue, you can listen for clicks on the label, and then trigger a click on the file input. Here is how you could do it with jQuery:

if ($.browser.mozilla) {
  $('label.upload-button').click(function(event){
    var input = jQuery('#'+$(this).attr('for'));
    input.click();

    return false;
  });
}

Why don't we bind the event for all browsers? You can, but Internet Explorer will raise AccessDenied exceptions if you then try to automatically upload the file.

Demo:

Go ahead, click this very stylish button:

blog comments powered by Disqus
Monkey Small Crow Small