angular - mat-select 中的样式复选框具有多个选项

Question

我有一个与该multiple选项一起使用的 mat-select（请参阅docs 中的此示例）。
我想在选中复选框时设置复选框的颜色（默认为蓝色）。
所以从这里：

我需要得到这个：

但我不知道应该使用哪个 CSS 选择器/规则。
通常对于复选框，我会使用这个：

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

但选项不被视为复选框。

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>

标签： angularangular-materialangular7

Answer 1

下面的 CSS 似乎可以工作，如这个 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;
}