时间戳

首页 > 解决方案 > 用样式标签/按钮替换浏览器的本机文件输入 UI

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

问题描述

我试图对这篇文章进行修改，以便为文件上传输入提供一个更好看的用户界面。简而言之，它主要是一种仅使用 CSS 的方法，用于隐藏浏览器的本机输入按钮并将其替换为样式标签。我想使用它的项目也恰好是一个 Ionic3 项目，所以我希望标签的样式看起来像一个自然的离子按钮。

如果标签包含纯文本，则文章中的代码效果很好，但是如果我尝试在标签中嵌入一个按钮元素，无论我是否偶然使用了 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

标签： htmlcssfile-uploadionic3

解决方案

这不是纯粹的 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();
}

推荐阅读