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: , ,

Back to top
http://twitter-widget.com/blog/button-html/