0

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

Juri
  • 1,531
  • 2
  • 20
  • 43

1 Answers1

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.

Rok Benko
  • 14,265
  • 2
  • 24
  • 49