We’ve all come across the ugliness of html form upload inputs. They are by default not that aesthetically pleasing. But with the magic that is css we can style them up real nice like. Granted there are a few alternatives, such as using javascript like the examples found on Appelsiini,  and even Filament Group have a js solution, but what if you just want to use a little CSS. Well here’s how you can create a nicer upload button without much code at all.

First lets do the markup:


<div class="file">
    <input type="file" class="fileUpload" name="fileUpload">
    <span class="button">Choose File to Upload</span>
</div>

Granted, it’s a little more complex than the standard 1 line for file input, but the result is worth it folks.

So lets apply some fairly simple CSS then shall we?


.file {
    margin: 0;
    display: inline-block;
    min-width:140px;
    position: relative;
    padding: 5px 5px 3px 35px;
    background: #eee url('images/paperclip.png') no-repeat 5px 50%;
    border-bottom: solid 1px #ccc;
    border-right: solid 1px #ccc;
}
.file input {
    cursor: pointer;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    filter: alpha(opacity=1);
    -moz-opacity: 0.01;
    opacity: 0.01;
    font-size: 100px;
}
.file .button {
    font-size: 10px;
    width: 100%;
    line-height: 30px;
    cursor: pointer;
    text-transform: uppercase;
}

So to explain how this works, our actual input field is hidden using the opacity property. We don’t want to display:none; as we won’t be able to click to upload so lets just make it invisible.
Then the container div (.file) we simply set a background image, in out case a little paperclip to show we are uploading an attachment, as well as put a background colour on it. Plus some nice little borders.
Finally we style the span class (.button) that will be the label text for out button, and you’ll get something like this:

See, I told you it was simple!

So what about showing the name of the file you have selected? Well we can quickly do that will a little jQuery.

So go ahead and include jQuery within your <head> tags.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

As always I just use Google’s CDN to include the jQuery library. Ok and now for out script. Just put this at the end of the page, before you close the body tag as it’s doubtful anybody will select a file before the page has loaded:


(function(){
    $("input:file").change(function (){
        var fileName = $(this).val();
        nameSpace = $(this).next('span');
        nameSpace.html(fileName);
    });
})();

Hey presto you have it. Select a file and you will see it written in your button.

You can download the files here:
Download

Or if you’d prefer the files where I used an icon font instead of an image, try this one:
Download
Demo