Hide the browse button on a input type=file

Question

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

Answer 1

Came across this question and didn't feel like any of the answers were clean. Here is my solution:

  Select file
  

When you click the label the select file dialog will open. No js needed to make it happen.

You can style the label to look like a button.

Here is an example using w3css and font awesome:

Of course you need to add an event listener to the input to detect a file was chosen.