Remove hover and focus color on material form field in angular material 16?

Question

A simple form like this

<form [formGroup]="myForm">
    <mat-form-field class="my-light-field">
      <mat-label>Name</mat-label>
      <input matInput type="text" [value]="myObj?.name" required readonly/>
    </mat-form-field>
</form>

i like to be the field transparent

.my-light-field {
  .mdc-text-field--filled{
    background-color: transparent !important;
  }
}

On hovering over the field, it is getting darker. Is it possible to remove on hover effect? And on focus too...

Answer 1

Simply add the following CSS in styles.scss:

// Manipulate initial background color
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: transparent;
}

// Manipulate background color on hover and focus
.mat-mdc-form-field-focus-overlay {
  background-color: transparent;
}

See the live demo.

Note: If the code above doesn't work for you, add !important.