Hide the browse button on a input type=file

You may just without making the element hidden, simply make it transparent by making its opacity to 0.

Making the input file hidden will make it STOP working. So DON'T DO THAT..

Here you can find an example for a transparent Browse operation;


No, what you can do is a (ugly) workaround, but largely used

  1. Create a normal input and a image
  2. Create file input with opacity 0
  3. When the user click on the image, you simulate a click on the file input
  4. When file input change, you pass it's value to the normal input (so user can see the path)

Here you can see a full explanation, along with code:

http://www.quirksmode.org/dom/inputfile.html

Tags:

Html

Css