CODEWITHSUNDEEP
angularangular-materialangular7
Usr
Usr

Reputation: 2838

Style checkboxes in mat-select with multiple options

I have a mat-select that I'm using with the multiple option (see this example from docs).
I want to style the color of checkboxes when they are selected (by default it's blue).
So from this:

enter image description here

I need to get this:

enter image description here

but I don't know which css selector/rule I should use.
Normally for checkboxes I would use this:

/deep/.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #A5C73C;
}

but the options are not seen as checkboxes.

HTML:

<mat-form-field>
  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

Upvotes: 5

Views: 11266

Answers (1)

Martin Parenteau
Martin Parenteau

Reputation: 73731

The following CSS appears to work, as shown in this stackblitz:

::ng-deep .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
    color: unset;
}

::ng-deep .mat-option-pseudo-checkbox.mat-pseudo-checkbox-checked {
    background-color: #A5C73C;
}

Upvotes: 10

Related Questions