Within my mat-form-field, I have a mat-chip-list set up similar to the example provided in this link. When I click inside the field, the mat-label and what appears to be the border-bottom (not entirely sure) change color when focused. How can I customize these colors? Currently, they reflect the default angular theme color, but I want to make some changes.
<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 attempted the following code without success:
mat-label:focus{
color: red
}
I came across this solution: Change color of matInput, but I prefer not to use "!important".