Change angular material multi select's selected values css

Question

I want to change material multi select selected values css.

                <mat-form-field class="mat-form-field-fluid">
                    <mat-select placeholder="Kullanıcı Yetkileri" [(value)]="selectedPermissions" multiple>
                      <mat-option *ngFor="let permission of filteredPermissions | async" [value]="permission">{{permission.name}}</mat-option>
                    </mat-select>
                  </mat-form-field>

When I inspect the selected values in the browser source code I see like this:

<span class="ng-tns-c22-16 ng-star-inserted">selection-1,selection-2</span>

So I want to set a css class to selected values by wrapping a span .

How can I change css of material multi select's selected values.

Thanks.

Answer 1

It depends, but probably you will need to disable the Encapsulation of the component who contains the <mat-form-field>

On your @Component decorator add:

encapsulation: ViewEncapsulation.None

That way you can inspect the component with your Browser inspector and write the appropriate CSS rules.