Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide the browse button on a input type=file

Tags:

html

css

Is there a way to hide the browse button and only leave the text box that works in all browsers?

I have tried setting the margins but they show up different in each browser

like image 569
josh Avatar asked Jun 16 '11 18:06

josh


People also ask

How do you make an input file invisible?

The <input type="hidden"> defines a hidden input field. A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted. A hidden field often stores what database record that needs to be updated when the form is submitted.


1 Answers

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

like image 173
Ortiga Avatar answered Oct 11 '22 02:10

Ortiga