For some silly reason standard css wouldn’t allow the file upload button to be styled. Naturally the very smart people have found ways around this. Although there are various method, I like this simple one the most.

The HTML

<div id="file" class="btn">Upload Photo</div>
<input type="file" name="file" />

The CSS

#file {
    display:none;
}​

The Javascript

var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
var fileInput = $(':file').wrap(wrapper);
fileInput.change(function(){
    $this = $(this);
    $('#file').text("File attached");
})
$('#file').click(function(){
    fileInput.click();
}).show();

From the very intelligent folks at Stack Overflow

Variation 1: Image button

If you would like to use an image button instead, simple add your image code instead of “Upload Photo” like this:

The HTML

<div id="file"><img src="/images/button-image.jpg"></div>
<input type="file" name="file" />

Variation 2: File name

If you would like to use the file name instead of the text “File attached”, you could try the following Javascript, courtesy of the brainy folks of StackOverflow, the only code that is highlighted:

The Javascript

 var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
 var fileInput = $(':file').wrap(wrapper);
 fileInput.change(function(){
    $this = $(this).val().replace(/C:\fakepath\/i, '');
    $('#file').text($this);
 })
 $('#file').click(function(){
    fileInput.click();
 }).show();