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)?

No idea. I removed it since it doesn't make sense in the context of the question. — BalusC, Jun 09 '10 at 19:48
I just want the button because I have stylized forms and the textbox appear in FF bot not in chrome or safari...it have a behavior differences and I wanted to make it work same in all browsers. — Diego Correa, Jun 10 '10 at 13:23

score 2 · Answer 1 · answered Jun 09 '10 at 19:44

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.

score 2 · Answer 2 · edited Nov 23 '11 at 20:14

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.

score 1 · Answer 3 · answered Jun 09 '10 at 19:41

1

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

answered Jun 09 '10 at 19:41

Topher Fangio

20,372
15
61
94

Any documentation on how to use it? – Diego Correa Jun 10 '10 at 17:15
@Diego Correa - Coming soon. Working on some bug fixes and documentation right now and this afternoon. – Topher Fangio Jun 14 '10 at 16:40

score 1 · Answer 4 · edited Jun 09 '10 at 19:48

1

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

I think CSS is your best bet.

edited Jun 09 '10 at 19:48

egrunin

24,650
8
50
93

answered Jun 09 '10 at 19:42

wag2639

2,523
5
25
30

score 1 · Answer 5 · answered Apr 14 '11 at 17:38

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!

Style of input=File as a button

5 Answers5

Linked