What is the best way to replace the file browse button in html?

Question

I know that it's possible to replace the browse button, which is generated in html, when you use input tag with type="file.

I'm not sure what is the best way, so if someone has experience with this please contribute.

Answer 1

The best way is to make the file input control almost invisible (by giving it a very low opacity - do not do "visibility: hidden" or "display: none") and absolutely position something under it - with a lower z-index.

This way, the actual control will not be visible, and whatever you put under it will show through. But since the control is positioned above that button, it will still capture the click events (this is why you want to use opacity, not visibility or display - browsers make the element unclickable if you use those to hide it).

This article goes in-depth on the technique.

Answer 2

Browsers don't really like you to mess around with file inputs, but it's possible to do this. I've seen a couple of techniques, but the simplest is to absolutely position the file input over whatever you want to use as a button, and set its opacity to zero or near-zero. This means that when the user clicks on the image (or whatever you have under there) they're actually clicking on the invisible browse button.

For example:

<input type="file" id="fileInput">
<img src="...">

#fileInput{
    position: absolute;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}

Answer 3

If you don't mind using javascript you can set the opasity of the file-input to 0, place your styled control on top via z-index and send clickevents from your button to the file-input. See here for the technique: http://www.quirksmode.org/dom/inputfile.html