<form>
  <p><input type="file" id="file" name="file" /></p>
  <p><input type="reset" /></p>
</form>

.file-input {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  position: fixed;
  top: 0;
}
.file-label {
  border: solid 1px;
  box-sizing: border-box;
  display: inline-block;
  line-height: 1.5;
  padding: 0.5em;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  max-width: 100%;
}
.file-label:before {
  content: "Choose File";
}
.file-label:lang(ja):before {
  content: "ファイルを選択";
}
.file-label[data-file]:not([data-file=""]):before {
  content: attr(data-file);
}
.file-input:enabled + .file-label {
  cursor: pointer;
}
.file-input:enabled + .file-label:not(:hover):not(:focus) {
  border-color: #808080;
}
.file-input:disabled + .file-label {
  opacity: 0.5;
}

!function( window, document ) {
  Array.prototype.forEach.call( document.body.querySelectorAll( '[type="file"]' ), function( file ) {
    var label = document.createElement( 'label' );
    label.setAttribute( 'for', file.getAttribute( 'id' ) );
    label.setAttribute( 'class', file.getAttribute( 'class' ) );
    label.classList.add( 'file-label' );
    label.setAttribute( 'tabindex', 0 );
    label.setAttribute( 'data-file', file.value.replace( /^.*[\\\/]/, '' ) );
    file.setAttribute( 'class', 'file-input' );
    file.setAttribute( 'tabindex', -1 );
    file.parentNode.insertBefore( label, file.nextElementSibling );
    file.addEventListener( 'change', function( event ) {
      label.setAttribute( 'data-file', this.value.replace( /^.*[\\\/]/, '' ) );
    }, false );
  } );
  Array.prototype.forEach.call( document.body.querySelectorAll( '[type="reset"]' ), function( button ) {
    button.addEventListener( 'click', function( event ) {
      Array.prototype.forEach.call( this.form.querySelectorAll( '[data-file]' ), function( file ) {
        file.setAttribute( 'data-file', '' );
      } );
    }, false );
  } );
} ( window, document );