代码之家 › 专栏 › 技术社区 › Usr

mat select中带有多个选项的样式复选框

angular7 angular-material angular

1

Usr · 技术社区 · 5 年前

我有一个垫子选择用在 multiple 选项(见) this example from 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>

1 回复 | 直到 5 年前

1

ConnorsFan 5 年前

下面的css似乎可以工作,如 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;
}