CODEWITHSUNDEEP
angular-materialangular-material-15
Juri
Juri

Reputation: 1751

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

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

Upvotes: 2

Views: 3284

Answers (2)

Alok Agase
Alok Agase

Reputation: 63

::ng-deep .mdc-radio__background::before {
      background-color: transparent;
    }

Upvotes: 0

Rok Benko
Rok Benko

Reputation: 23060

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.

Upvotes: 6

Related Questions