Styling an Upload box

[Nathan]

I recently needed to style an upload box.  I couldn't find any place to do this within the css.  Turns out it isn't possible without jquery as far as I could tell.

 

I needed to take the default:

 

I needed it to look like:

 

Got it working with the following:

 

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();