Why isn't there a fancy file element upload button for twitter bootstrap? It would be sweet if the blue primary button was implemented for the upload button. Is it even possible to finesse the upload button using CSS? (seems like a native browser element that can't be manipulated)
Css – Twitter Bootstrap Form File Element Upload Button
cssformsinput-type-filetwitter-bootstrap
Best Answer
Here's a solution for Bootstrap 3 and 4.
To make a functional file input control that looks like a button, you only need HTML:
HTML
This works in all modern browsers, including IE9+. If you need support for old IE as well, please use the legacy approach shown below.
This techniques relies on the HTML5
hidden
attribute. Bootstrap 4 uses the following CSS to shim this feature in unsupportive browsers. You may need to add if you're using Bootstrap 3.Legacy approach for old IE
If you need support for IE8 and below, use the following HTML/CSS:
HTML
CSS
Note that old IE doesn't trigger the file input when you click on a
<label>
, so the The CSS "bloat" does a couple things to work around that:<span>
Feedback & Additional Reading
I've posted more details about this method, as well as examples for how to show the user which/how many files are selected:
https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/