Internet Explorer自定义的单击输入文件使输入可编辑为文本

Question

我有一个自定义的按钮来上传图像。在Internet Explorer上，单击该按钮后，它会显示此行（请参阅附件图像）

正如您在Internet Explorer上看到的那样，它像普通的可写输入一样添加了该行，我不希望那样。

.btn {
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.6rem;
  display: inline-block;
  border-radius: 4px;
  transition: all .2s;
  position: relative;
  font-size: 14px;
  // // min-width: 24.7rem;
  // display: block;
  width: 100%;
  height: 4rem;
  border: none;
  cursor: pointer;
  margin-top: 4rem;
  text-align: center;
  font-family: inherit;
  background: gray;
  color: white;
  height: 30px;
}

.hidden-input-file {
  position: absolute;
  top: 9px;
  left: -80px;
  opacity: 0;
  cursor: inherit;
  padding-bottom: 8px;
  padding-top: 8px;
  margin-top: -8px;
  filter: alpha(opacity=0);
  outline: none;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="btn btn--upload-image upload-training-img">
  <input type="file" class="hidden-input-file" accept="image/*"> upload <i class="material-icons icon icon--midle-08">photo_camera</i>
</div>

如您在代码段中所见，它工作正常，但是在Internet Explorer上它显示了该行。