How does one style a form input field of type 'file' for Safari/Chrome and other Webkit based browsers?
Right now, all i get is the 'Choose File' button displayed on top of the usual text type box.
I've looked around a bit on Google, but havent really seen anything helpful
any help?
I don't believe that you can. Apple only recently decided to enable styling of their form controls. They believe that it's harder to find buttons and inputs when they don't look like buttons an inputs - so they might not let you style their file upload inputs yet.
I'm around 90% sure you can't do it.
There are no browsers that implement a good html file upload control. The best way to ensure cross-browser styling on a file upload control is to use a Silverlight or Flash control.
having a Flash uploader can give even more pain: It is only working in IE in the same session as your browser and in all other browers it makes a new session, so you will kicked out of your back end secure app. the only solution to that is sending your session data to the flash aswel... there you go!
I landed on this page looking or ways to style the file input item for Safari... I have lots of them in a table cell of only 150px wide but these inputs are forcing it bigger. I found just one solution till now, and that is let them float above the rest using style="position:absolute;z-index:2" while my TD has position:relative styling.
bad bad solution, I know!