Feature: File input button

[leon]

<input type="file" /> has always been very hard to style.
I've seen that there is a .custom-file but this shows the filepath.
https://v4-alpha.getbootstrap.com/components/forms/#file-browser

What if you want the same look and feel as a button?

My proposal is to be able to style a file input as a btn.

What do you guys think?

Proof of concept
Check out this plunkr
https://plnkr.co/edit/feW4kk?p=preview

I've tested the button with successful results in:
Chrome 55
Safari 10
Firefox 49
IE Edge
IE 11
IE 10

The code if you don't want to look at the plunkr

<div class="btn btn-default btn-file">
  <input type="file" />
  Upload a file
</div>

.btn-file {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.btn-file input {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 100%;
  min-height: 100%;
  margin: 0;
  opacity: 0;
  transform: translate(-100%, 0) scale(3);
  direction: ltr;
  cursor: pointer;
}

/* Hack for forcing webkit to show a cursor all the time */
.btn-file input::-webkit-file-upload-button {
  cursor: pointer;
}

[RusinovAnton]

#21812

/* Hack for forcing webkit to show a cursor all the time */
.btn-file input::-webkit-file-upload-button {
  cursor: pointer;
}

[mdo]

Going to pass on this given we have a custom file input and I don't think further divorcing it from browser default styling is a good idea for us to implement. I'd rather let folks set that kind of custom styling for themselves. Thanks though!