html - 用样式化的标签/按钮替换浏览器的 native 文件输入 UI

Question

我正在尝试旋转 this article为文件上传输入提供更好看的用户界面。简而言之，它主要是一种纯 CSS 方法，用于隐藏浏览器的 native 输入按钮并将其替换为样式标签。我想在其中使用它的元素也恰好是一个 Ionic3 元素，所以我希望标签的样式看起来像一个自然的 ionic 按钮。

如果标签包含纯文本，文章中的代码效果很好，但如果我尝试在标签中嵌入一个按钮元素，无论我是否偶然使用了 ion-button 属性，我都不会喜欢。

  .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
  }

  .inputfile + label {
    display: inline-block;
  }

  .inputfile + label {
    cursor: pointer; /* "hand" cursor */
  }

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file text label</label> &lt;-- this works
<br/><br/>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">
  <button>Choose a file button label</button>
</label> &lt;-- this doesn't work

Answer 1

这不是纯 CSS 解决方案或特定于 Ionic，但通常对于一个按钮作为隐藏文件输入元素的 UI，以下似乎有效。您可以在按钮上放置一个点击处理程序，然后在该处理程序中调用输入元素的 DOM 点击处理程序:

<button (click)="handleClick($event)">Choose a file</button>

// Grab the element (Ionic/Angular)
    @ViewChild('fileInput') fileInput;
handleClick($event) {
  this.fileInput._native.nativeElement.click();
}