How to hide text field in Html File Upload

Question

I am wondering how to hide the text field portion of a standard html file upload tag

for example

Answer 1

input[type="file"] { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0 265px 22px 155px);  } /* Hide input field */
@-moz-document url-prefix()
  {
  input[type="file"] { clip: rect(0, 265px, 22px, 125px);  } /* Mozilla */
  }
* > /**/ input[type="file"], x:-webkit-any-link { clip: rect(0, 86px, 22px, 0); } /* Webkit */

This will do the same without JavaScript, but requires absolute positioning to use the clip property.

References

• Custom Upload Button
• CSS Wikibook: Clipping