A file input button for all browsers, is this possible?

I can't remember the source of the technique but this seems to be cross-browser. Tested in:

• Google Chrome 9
• FireFox 3.6
• Internet Explorer 6-9
• Opera 10
• Safari for Windows

Here is the complete code:

HTML:

<div>    <button><!-- this is skinnable -->Pick a file ...</button>    <input type="file" /></div>

CSS:

div{    position:relative;    width: 100px;    height: 30px;    overflow:hidden;}div button{    position: absolute;    width: 100%;    height: 100%;}div input{    font: 500px monospace; /* make the input's button HUGE */    opacity:0; /* this will make it transparent */    filter: alpha(opacity=0); /* transparency for Internet Explorer */    position: absolute;  /* making it absolute with z-index:1 will place it on top of the button */    z-index: 1;    top:0;    right:0;    padding:0;    margin: 0;}

The idea is to make the <input type="file" /> transparent and place it on top of some style-able content (a <button> in this case). When the end user clicks the button she will actually click the <input type="file" />.

The simple way to use a "label" tag and "for" property. Like this http://jsfiddle.net/Txrs6/ but in this case we don't see a chosen file.CODE

<label for="inputFile" class="col-sm-3" style="padding-left: 0px;"><a class="btn btn-info">Выбрать...</a></label>`<input style="display: none;" type="file" id="inputFile">

Another way with js http://jsfiddle.net/PZ5Ep/

Your best bet in that case would be to use a flash uploader. This would introduce a complete separate control and would have no dependency on the browser. There are plenty of them on the net. Here's one : http://swfupload.org/