Style of input=File as a button

Question

I\'m trying to put some style in the input=file aka uploader and I\'m having a hard time with it, is there some NON FLASH solution (maybe jquery or even plain javascript)?

Answer 1

I wrote a jQuery plugin named jfancyfile that aims to do just that.

It does way more than every else solutions, since it allows using any dimensions for the button.

Something I thought had to be developed since I couldn't find this on the web.

Warning: it hasn't been tested againts all web browsers yet!

Answer 2

Use the clip property to separate the button from the input box, hide it using opacity: 0, then absolutely position it over the styled button.

* > /**/ input[type="file"], x:-webkit-any-link {
  outline: none; 
  cursor: pointer; 
  position: absolute; 
  top:0; 
  clip: rect(0px 86px 22px 0px); /* Webkit; use 0px 222px 22px 145px for other browsers */
  z-index:2;
  opacity:0;
}

A styled input field can be positioned next to the styled button. Use event handlers to keep the displayed value of the input field in sync with the chosen file name.

Answer 3

It's doable, but not that easy. You need to mimic the file input with a normal input element/button and overlay the original file input with it. Long story short: http://www.quirksmode.org/dom/inputfile.html There are jQuery plugins for this, like this one.

Answer 4

I think this Quirksmode page may have your solution: http://www.quirksmode.org/dom/inputfile.html

I think CSS is your best bet.

Answer 5

I wrote the following a while back to help me with this problem. Hasn't been updated in a while, but please let me know if you find bugs (just create an issue on the GitHub page).

http://github.com/topherfangio/FancyFile