Twitter Bootstrap File Input

For the most part the all of the browsers have stopped their proprietizing and unified to a set of standards, IE much like an old man learning to send an email for the first time. But one thing that is still very different from one browser to another in the file input field.

Google Chrome file input

Mozilla Firefox file input

Opera file input

Internet Explorer file input

These inputs are all to scale.

And the fun doesn’t stop there. To make makes more difficult, they all measure element width differently. Some the full width of the text box and button and others only the text box. So forget styling them that way!

Let’s not forget colours. Oh the agony.

The solution?

Bootstrap File Input

A jQuery plugin that uses styles from the beautiful Twitter Bootstrap.

People use Bootstrap mainly for it’s ¬†styling components. A developer can have a beautiful website scaffold with simple yet elegant design elements in minutes.

Except the file input field.

This plugin does it for you. Check out this file input field:

Upload a file:

Isn’t that neat? Check out the full demo & documentation for Bootstrap File Input to learn more.


Share Button

Tagged under: , ,


Hi Greg, 

just noticed something slightly odd happening when you use the inside placement option. there is no way to cancel the selection anymore:

after you have selected a file the name is put on the button, but if you decide you would like to cancel the selection there's no way to do so.

if however you use the outside placement you can press the button again to select another file but press cancel and the previous selection is cancelled.

just my 2 cents!

Back to top