If you've ever tried styling form inputs then, like me, you probably just tweak their margins so they position nicely, and then go home and drink away the feeling of defeat. Styling most form elements is an incredibly difficult task. Trying to style file inputs across browsers, however, is virtually impossible.

I style a lot of forms while working on JIRA. I updated the visual styles for the Forms component within AUI (our common UI library), however I always had to ignore the file inputs. They stick out like a sore thumb amongst the other form elements.

There are many other workarounds, but most are quite dated and none of them met the requirements I had.

Say hello to Fancy File Input

It's accessible, i18n is easy, all states can be styled completely, it's all CSS-based so it looks beautiful on a HiDPI display, it plays well with other plugins, is maintainable (LESS, unit tests, grunt, bower), and as far as customisability is concerned … well … go take a look at the demos.

How to get it

You can either check out the source, or bower install fancy-file-input (once this bower bug is fixed).

How to use it

It's very simple to use.

Browser support

IE8, IE9, IE10, IE11, Firefox, Chrome, Safari, Opera, iOS6+, Android 3+, Windows Phone 8*

* the styling works, however Windows Phone 8 does not yet allow access to files, so they are effectively disabled.

Feedback

• Raise an issue
• Talk to me on Twitter