Check it out

File input fields look differently in all browsers. It's a pain in the arse to design something that looks nice in all browsers and it sucks that support for this is not available in Twitter Bootstrap.

This jQuery plugin is designed to make all file input fields look like standard Twitter Bootstrap buttons

Why should you want this plugin?

If you use Twitter Bootstrap then you know how awesome it is for styling a website with minimal effort.


Calling Bootstrap File Input
<!-- Change the wording using a title tag -->
<input type="file" title="Search for a file to add">
<!-- Disable the styling -->
<input type="file" data-bfi-disabled>
<!-- Display filename inside the button instead of its label -->
<input type="file" data-filename-placement="inside">

Tested in Chrome, Firefox, Opera, and even Internet Explorer 8.


Attributes used on the file input elements. At the moment all file inputs at the time of load have use of these attributes.

Attribute Type Action
title String The text that will appear in the button
data-bfi-disabled No value required When this attributes exists it prevents the file input from being styled
data-filename-placement String ['outside', 'inside']
Default: 'outside'
Defines where the selected file name will be displayed :
  • outside to place it right after the button (DEFAULT)
  • intside to place it inside the button, instead of the title