Styled file input button with accesibility

file_input_with_accessibility.html

<!-- Solution as found in - http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ -->

<style>
  .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
  }
  .inputfile + label {
    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
    cursor: pointer; /* "hand" cursor */
  }
  .inputfile:focus + label,
  .inputfile + label:hover {
    background-color: red;
  }
</style>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>