CODEWITHSUNDEEP
htmlcssangularangular-material
denisiulian
denisiulian

Reputation: 273

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

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.

Upvotes: 2

Views: 3043

Answers (1)

stephen carvalho
stephen carvalho

Reputation: 157

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.

Upvotes: 1

Related Questions