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

So I found this solution that is very easy to implement and gives a very clean GUI

put this in your HTML

and this in your CSS

label.att-each {
width: 68px;
height: 68px;
background: url("add-file.png") no-repeat;
text-indent: -9999px;
}

add-file.png can be any graphic you wish to show on the webpage. Clicking the graphic will launch the default file explorer.

Working Example: http://www.projectnaija.com/file-picker17.html