How to style file input's button with Angular Material?

Question

I have seen a lot of questions about this but none of them solved my issue.

What I have:

Angular 11, Angular Material 8 and a file input like this:

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

What I need:

I need to customize this button's color, text and size.

How can I customize it?

Answer 1

Finally solved this way (Valid for Angular Material and Bootstrap):

I set 3 separated components:

1. The button that will be visible (It can be an Angular Material one or a Bootstrap one, as seen below)
2. The file input
3. The label that will contain the file name

---

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

With CSS I force the input to be overlay the button, and I set the opacity=0 so that the button is visible.

- Button:

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

- Input:

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

- Input (Hover):

cursor: pointer;

- Label:

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

---

And this is the final result: