We have all seen the horrible file upload button boxes, we all know what they look like.. and they all differ slightly from browser to browser.

There are lots of hacks out there to emulate an upload button click to launch the file input dialog, or to position the input box transparent ontop of a beautified button, but all of these are limited to the browser support and some browsers require hacks.

I want to show you the simplest way I can think of..

Here’s how it looks (give it a click!):

 

Ok that’s cool, but how exactly does it work?

It works by hiding the file input box out of view, there are multiple ways of doing this, setting the opacity as 0, resizing it etc. But I found that the simplest way of doing this is actually to simply position it absolute and off the screen.

In this case, we wrap it all in a div with a class of upload box, then give it an overflow of hidden.. (Yes, the penny has dropped!)

We next position the file input box absolute, and too far to the left, so it is “hidden” by the overflow attribute of the parent.

Now we use the label element, this actually triggers the input file dialog to pop open, so you can style this label element however you like. The example above is using CSS only, but you can assign background images, or do pretty much anything you like.

The last thing to do is write a little bit of Javascript to display the file you’ve selected.

We attach an event listener to the “onchange”, and then run a very simple function to extract the filename and display it in the label element.

I hope this makes sense.. below are the steps for replicating the above!

Step 1

The HTML

<div class="upload_box">
 <input id="select_file" type="file" />
 <label for="select_file" id="selected">SELECT FILE</label>
</div>

Step 2

The CSS


.upload_box {
    overflow: hidden;
    position: relative;
}

#select_file {
    position: absolute;
    left: -300px;
}

label {
    cursor: pointer;
    font-weight: bold;
    background-image: -moz-linear-gradient(50% 0% -90deg,rgb(0,76,102) 0%,rgb(0,32,64) 100%);
    background-image: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(0,76,102)),color-stop(1, rgb(0,32,64)));
    background-image: -webkit-linear-gradient(-90deg,rgb(0,76,102) 0%,rgb(0,32,64) 100%);
    background-image: -ms-linear-gradient(-90deg,rgb(0,76,102) 0%,rgb(0,32,64) 100%);
    background-image: linear-gradient(-90deg,rgb(0,76,102) 0%,rgb(0,32,64) 100%);
    height: 53px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 5px rgb(0,0,0);
    -webkit-box-shadow: 0px 0px 5px rgb(0,0,0);
    box-shadow: 0px 0px 5px rgb(0,0,0);
    padding: 10px;
    color: #fff;
    font-size: 20px;
    display: inline-block;
    line-height: 35px;
    text-align: center;
}

Step 3

The Javascript


<script>
document.getElementById('select_file').addEventListener('change',fileName,false);
function fileName()
{
 var _file = document.getElementById('select_file');
 document.getElementById('selected').innerHTML = _file.value.replace(/C:\\fakepath\\/i, '');
}
</script>