Angular change focus color for mat-label inside mat-form-field

Question

I have a mat-chip-list inside a mat-form-field like in the second example: https://material.angular.io/components/chips/overview. When clicking inside, the mat-label and the border-bottom (I think it's border bottom) get focused and changes the color. How can I modify this colors? Default is an angular theme color, but I would like to change this.

<mat-form-field class="example-chip-list" appearance="fill">
  <mat-label>Favorite Fruits</mat-label>
  <mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip *ngFor="let fruit of fruits" (removed)="remove(fruit)">
      {{fruit.name}}
      <button matChipRemove>
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-chip>
    <input placeholder="New fruit..."
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
</mat-form-field>

I tried but didn't work:

mat-label:focus{
color: red
}

Founded this solution: Change color of matInput, but I would like to don't use important.

try adding before your class `::ng-deep`, if it works let me know, and I explain further in an answer — Francisco Santorelli, Jun 06 '22 at 09:42
Worked like here: https://stackoverflow.com/questions/54029193/change-color-of-matinput but I wonder if there is another solution without important. — denisiulian, Jun 06 '22 at 09:46
There is, but you have to check exactly how many classes are targeting it. If original color comes from `.mat-form .mat-label` selector, your `.mat-label` will have less priority. Check on the inspector how many selectors are there, and add one more yourself with `::ng-deep` — Francisco Santorelli, Jun 06 '22 at 09:50
`ng-deep` is needed to penetrate the view encapsulation that angular imaterial tself brings — Francisco Santorelli, Jun 06 '22 at 09:51

score 1 · Answer 1 · answered Jul 21 '22 at 16:22

If you want to change the color of any mat component without using ::ng-deep or the !important add the css to a global style sheet.

Like this in your case. global.scss:

.mat-focused .mat-form-field-label {
  /*change color of label*/
  color: red;
 }

Here's how to create a global stylesheet just incase: https://www.tektutorialshub.com/angular/angular-global-css-styles/

Also read through this: https://material.angular.io/guide/customizing-component-styles

Additionally ::ng-deep is now deprecated so it's a good practice to avoid using ::ng-deep and rather using global stylesheets.

Angular change focus color for mat-label inside mat-form-field

1 Answers1