Bootstrap

There are many, many, many ways to hack a file input so it looks and behaves consistently across all browsers. There's even a pretty slick plugin to help get the job done. Unfortunately, most of these solutions are cumbersome, prone to cross-browser issues, and require JavaScript.

Today, I would like to propose a more fundamental approach for file inputs in Bootstrap 3 and 4.

Modern Approach (IE9+)

Let's start by nesting a button inside a <label>, adding the appropriate button classes to style it as we want: