css - Angular 11 - 如何使用 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>

我需要的：

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

我该如何定制它？谢谢。

标签： cssangularbootstrap-4angular-materialstyles

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;

---

这是最终的结果：