How to style "input file" with CSS3 / Javascript? [duplicate]

Question

I would like to style <input type="file" /> using CSS3.

Alternatively, I would like user to press on a div (that I will style) and this will open the Browse window.

Is that possible to do that using HTML, CSS3, and Javascript / jQuery only ?

Answer 1

I have this rough example that you might want to get some idea...

html​

<div id="file">Chose file</div> <input type="file" name="file" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

CSS

#file {     display:none; }​ 

jQuery

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

demo

​​​​​​​​​​​​​​

Answer 2

After checking Reigels idea, and this one, I wrote this simple solution to the common problem of styling a type="file" input field (tested it on Firefox, Safari and Chrome).

<div style="position:relative;"> <div id="file" style="position:absolute;">Click here to select a file</div> <input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').innerHTML = this.value;"> </div> 

Then you can of course style the "file" div as you want.

And if you want to use a type="text" input instead of a div, simply change innerHTML for value:

<div style="position:relative;"> <input type="text" id="file" style="position:absolute;" placeholder="Click here to select a file"> <input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').value = this.value;"> </div> 

Here is my original answer using jQuery:

<div style="position:relative;"> <div id="file" style="position:absolute;">Click here to select a file</div> <input type="file" name="file" style="opacity:0; z-index:1;" onchange="$('#file').text($(this).val());"> </div>