Удалить наведение курсора и сфокусировать цвет на поле формы материала в угловом материале 16?

Question

Простая форма, такая

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

мне нравится быть прозрачным в поле

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

При наведении на поле становится темнее. Можно ли убрать эффект при наведении? И на фокусе тоже...

Answer 1

Просто добавьте следующий CSS в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;
}

Посмотрите живую демонстрацию .

Примечание. Если приведенный выше код вам не подходит, добавьте !important.