Search the Community

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