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

Question

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

What I have:

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>

What I need:

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

如何自定义它？谢谢。

Answer 1

最后这样解决了(适用于 Angular Material 和 Bootstrap):

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

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

---

HTML

<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;

---

这是最终结果: