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
If you use Twitter Bootstrap then you know how awesome it is for styling a website with minimal effort.
jQuery http://jquery.com/Twitter Bootstrap http://twitter.github.com/bootstrap/Bootstrap File Input bootstrap.file-input.js
$('input[type=file]').bootstrapFileInput();
$('.file-inputs').bootstrapFileInput();
<!-- 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 :
|