Jonathon Hill

Very clearly written post, thanks!

You can do the same thing more simply by dropping the button. There is no semantic value of having it there, and would only be confusing to those using the page on less capable devices (such as screen readers).

<div class="btn-file-input"><input type="file" name="file" /></div>
<style>
  .btn-file-input {
    display: inline-block;
    width: 200px;
    height: 40px;
    overflow: hidden;
    position: relative;
  }
  .btn-file-input > input[type="file"] {
    font-size: 200px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
  }
</style>