Styling file upload form buttons in Drupal
Posted on: 07 November 2008
I've used a nice bit of CSS to style all the buttons throughout our web site, but it all falls down a bit on the file upload button. For reasons best known only to the various browser developers, this button only has limited styling capability, if indeed any at all.
There are a few solutions out there, but they are all pretty messy in terms of adding a lot of cruft to your site code. I was looking for something a bit more elegant, and which would fit neatly in with the architecture of my Drupal-based site.
Fairly unsurprisingly, the answer lay with jQuery (something I find I've been saying rather a lot lately!). Translating the solution to Drupal turns out to be as simple as downloading the jQuery File Style plugin, then implementing hook_form_alter and modifying the form:
(and making your button image, of course)
Works great in IE6, IE7 and FF3