CODEWITHSUNDEEP
angularsassangular-material
he1dj
he1dj

Reputation: 73

How do I remove the Angular Material mat-form-field initial background color and background color on hover and focus?

I am trying to change my Angular Material's mat-form-field's background color to white by writing styles in my global styles.scss.

This is what I have now.

HTML:

<mat-form-field class="name-input">
  <mat-label>First name</mat-label>
  <input matInput id="name" formControlName="name" placeholder="Enter your first name and last name...">
</mat-form-field>

styles.scss:

.mdc-text-field, .mdc-text-field--filled, 
.mat-mdc-text-field-wrapper, .mdc-text-field--invalid, .mdc-text-field--focused,
.ng-tns-c1205077789-1,
.ng-tns-c1205077789-2,
.ng-tns-c1205077789-3 {
  background-color: white !important;
}

As you can see, I have these complex class names like ng-tns-c1205077789-3. I found those in inspector, these classes assign to div inside each mat-form-field on focus and they are unique. Without those, my input's background color does not change to white when hovering or on focus. What I want is to find a more generic class that can change background color of all my input fields in both focused and hover states. I can't be looking for every unique style for every mat-form-field.

Every alternative on how to customize component styles is appreciated!

Upvotes: 3

Views: 8577

Answers (1)

Rok Benko
Rok Benko

Reputation: 22880

Simply add the following CSS in styles.scss:

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

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

With the solution above, you can manipulate all <mat-form-field>s in your project at once, no matter what the <mat-form-field> is wrapping (e.g., the input, textarea, select, etc.).

See the live demo.

Upvotes: 12

Related Questions