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

Answer 1

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:

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