:host ::ng-deep not applying style to material checkbox

Issue

I'm trying to do a simple checkbox background color change for a material multiselect.

I've tried doing both

.mat-pseudo-checkbox-checked { background-color: #a9a9a9 !important; }

and

:host ::ng-deep .mat-pseudo-checkbox-checked { background-color: #a9a9a9 !important; }

in the component.css but neither of them work, and I don't want to leave it as just

::ng-deep .mat-pseudo-checkbox-checked { background-color: #a9a9a9 !important; }

since it would bleed out into other components, meaning ViewEncapsulation.None and doing it in the main styles.css file are out of the question. Thank you for your assistance.

EDIT: I've also tried adding a class to the <mat-select> itself and then doing mat-select.class .mat-pseudo-checkbox-checked { background-color: #a9a9a9 !important: } into the styles.css but that doesn't seem to work either

Solution

You need to add the class to panelClass attribute, please find below the changes!

Material Select API Reference

css

.custom-checkbox-color .mat-pseudo-checkbox-checked {
  background-color: #a9a9a9 !important;
}

html

<mat-form-field>
  <mat-label>Toppings</mat-label>
  <mat-select
    [formControl]="toppings"
    multiple
    panelClass="custom-checkbox-color"
  >
    @for (topping of toppingList; track topping) {
    <mat-option [value]="topping">{{topping}}</mat-option>
    }
  </mat-select>
</mat-form-field>

stackblitz

Answered By - Naren Murali