如何使用 Angular Material 设置文件输入按钮的样式？

Question

我看到了很多关于此的问题，但没有一个能解决我的问题。

我拥有的：

Angular 11、Angular Material 8 和文件输入如下：

<div class="form-group">
    <input #myInput type="file" formControlName="fi"
                     id="fi" name="fi" (change)="postMethod($event.target.files)">
</div>

我需要的：

我需要自定义这个按钮的颜色、文本和大小。

我怎样才能定制它？

Answer 1

最后通过这种方式解决了（适用于 Angular Material 和 Bootstrap）：

我设置了 3 个独立的组件：

1. 可见的按钮（可以是 Angular Material 按钮，也可以是 Bootstrap 按钮，如下所示）
2. 文件输入
3. 将包含文件名的标签

超文本标记语言

<div>
  <button #file class="btn btn-light">Examinate</button>
  <div style="display: inline-block">
      <input #myInput formControlName="file"
      id="file" name="file" (change)="postMethod($event.target.files)" type="file"/>
      <p>{{file}}</p>
  </div>
</div> 

CSS

使用 CSS，我强制输入覆盖按钮，并设置opacity=0以使按钮可见。

- 按钮：

float:left; 
position:absolute; 
z-index:-1;

- 输入：

opacity: 0; //Not visible
font-size: 0;
//Button dimensions
width: 90px; 
height: 37px; 
float: left; 

- 输入（悬停）：

cursor: pointer;

- 标签：

float: left; 
margin-left: 6px; 
margin-top: 7px;

这是最终结果：