I'm using the jQuery UI Button widget to style all the buttons on my pages, but the button on a 'file' type input remains elusive. How do I style this button in general, and can I somehow apply the Button widget to it?
+1
A:
File input elements are notoriously difficult to style.
There's a workaround described on quirksmode - check it out. I find it horribly hacky but it seems to work.
If you need more styling possibilities, you may have to look at a Flash-based uploader like SWFUpload. They work in a different way however - Flash uploads the file data directly - so you may have to change the way your forms work.
Pekka
2010-04-14 09:07:58
+1 - the quirksmode solution is a bit hacky but it does work well. There's a trade-off using both solutions, SWFUpload requires flash and the quirksmode solution requires JS (unless you go with the CSS only solution which doesn't show the file name/path after it's been chosen). The upside for quirksmode is that it should gracefully degrade if JS isn't switched on.
Andy E
2010-04-14 09:23:22
+1
A:
Here is a write up about styling the "browse" button (and problems therein) http://www.cs.tut.fi/~jkorpela/forms/file.html#present
kingjeffrey
2010-04-14 09:10:23