Simplest Cross-Browser Custom Upload Button Using Basic CSS

If you google for custom upload button, you will find tons of blogs and stackoverflow answers that employ cool and complicated CSS tricks to customize the input file button. Some even require JavaScript. Those are well and good but I also believe in the KISS principle.

Well, enough of the rumblings and let's dive in to the code.

First, let's see how the default input file button looks like.

Code:
<input type="file" name="upload_file" />

Demo:

That's how the default input file control looks like in this browser. And it looks different on every browser. In Google Chrome, it displays "Choose File" button and next to it is the text "No file chosen". In Firefox, the button is called "Browse..." and the text says "No file selected.". In Internet Explorer, there is a textbox and a "Browse..." button. Styling this control is very limited. For one, you can't change the button label.

Now, let's see a customized version of it.

Code:
<label><input type="file" name="upload_file" style="position:absolute; left:-9999px" />Upload</label>

Demo: (Click Upload to see that the browser's File dialog appears)

Upload 

That's it! That's the simplest cross-browser (did I mention it works in IE6?) custom file upload button ever, as in ever. No advanced CSS3 tricks or browser vendor specific CSS required, nor JavaScript nor jQuery, just plain old <label> tag and the associated input file inside it. Of course, you can move the inline style to external CSS but that's just basically about it.

Now let's make it more fancy and style it like a button.

Code:
<style>
.custom-upload {
    background-color: #008000;
    border: 1px solid #006400;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    padding: 4px 10px;
}
.custom-upload input {
    left: -9999px;
    position: absolute;
}
</style>
<label class="custom-upload"><input type="file" name="upload_file" />Upload</label>

Demo: (Click Upload to see that the browser's File dialog appears)

Upload 

You can also attach event handlers to the input file as you normally would.

That's how simple it is. Enjoy! :)

Let me know what you think in the comments.