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

Christian Fazzini picture Christian Fazzini · Mar 4, 2011 · Viewed 15.7k times · Source

Is it possible to use uploadify to allow any user to select a file from the file dialogue and insert it into the file input element of a form? I only need to use uploadify as a way to style the "upload button" as an image.

I have tried other approaches here, here and here. All are not compatible with all browsers.

What else can I use / do to have my file input element as an image?

I would like to have my file input button to look consistent in all browsers.

Answer

Atanas Korchev picture Atanas Korchev · Mar 4, 2011

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" />.