Angular - CSS - 自定义类型=文件输入，如何使用按钮而不是标签？

Question

我制作了一个 type="file" 的自定义输入字段，因为我不喜欢默认的输入字段。为了实现这一点，我做了：

<input
            #uploadFile
            type="file"
            id="uploadFile"
            class="hidden-input"
            accept="image/jpeg, .jpeg, image/png, .png, image/pjpeg, .jpg, .docx, .pdf"
            (change)="selectFile($event.target.files[0])"
        />

     <label [matTooltip]="Upload a file" for="uploadFile">
<mat-icon>folder_open</mat-icon>
</label>

所以基本上它隐藏了原始输入，并且使用标签我可以通过单击垫图标打开浏览文件窗口。

这很有效，但我想使用标签而不是标签<button mat-icon-button>来对图标产生很好的涟漪效果，但"for"标签中使用的<button>.

如果我mat-icon用上面的按钮标签将我的标签标签包裹起来，会发生什么，button看起来我想要它，但是当我点击什么都没有发生时，我想这是因为button上面label，所以label没有得到点击，我尝试使用z-index但不起作用。

关于如何解决这个问题的任何想法？

Answer 1

只需制作一个按钮，其点击会触发隐藏文件输入上的点击事件

<button (click)="uploadFile.click()" mat-icon-button>
 <mat-icon>arrow_upward</mat-icon>
</button>