JSFiddle - React, Tailwind, and code Playground

by zarutofu

HTML

<form action="#">
  <div class="upload-box">
    <button type="button">
      upload
    </button>
    <input type="file" name="file" id="file">
  </div>

  <div class="upload-box-ie8">
    <input type="file" id="file-ie8">
    <label for="file-ie8">
      <span>IE8 upload</span>
    </label>
  </div>
</form>

CSS

.upload-box {
      position: relative;
    }
    
    button {
      width: 100px;
      height: 100px;
      border: none;
      background-color: #1C90F3;
      color: #ffffff;
    }
    
    #file {
      height: 0px;
      visibility: hidden;
      position: absolute;
    }
    
    .upload-box-ie8 {
      position: relative;
      overflow: hidden;
      width: 100px;
      height: 100px;
    }
    
    .upload-box-ie8 input[type=file] {
      position: absolute;
      left: -999px;
      opacity: 0;
    }
    
    .upload-box-ie8 label {
      background-color: #1C90F3;
      color: #ffffff;
      display: block;
      width: 100px;
      height: 100px;
      font-size: 11px;
      text-align: center;
      line-height: 100px;
    }
    
    .upload-box-ie8 label span {
      display: block;
    }

JavaScript

$("button").on("click", function() {
  $("#file").click();
});