在 mat-select multiple

如何解决在 mat-select multiple

我目前正在构建一个 Angular 应用程序。我在我的项目中使用了 mat-select 但复选框没有按预期出现。这是使用 https://material.angular.io/components/select/overview

这是我的代码

<mat-select class="c-input" multiple>
   <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>

我已经在 StackOverflow 上搜索了问题，但没有找到令人满意的答案。我希望有人回答这个问题。

提前致谢。

解决方法

要更改复选框的大小，您需要编辑此类.mat-pseudo-checkbox

.mat-pseudo-checkbox {
    width: 35px !important; //set your own size
    height: 35px !important;
}

为了操作 ✓，您可以编辑 mat-pseudo-checkbox-checked::after 类：

.mat-pseudo-checkbox-checked::after {
    top: 12.4px !important;
    left: 1px !important;
    width: 24px!important;
}

Here 是工作示例

,

查看您的代码，似乎某些 CSS 类覆盖了 mat-select 选项。但是，我们可以使用以下代码直接在 .mat-pseudo-checkbox 类上添加所需的类：

.mat-pseudo-checkbox{
    width: 26px !important; //needed !important to override the default behavior
    height: 26px !important; // add your own desired width and height
     
}

或

.mat-pseudo-checkbox {
  transform: scale(1.5);
}

这是工作示例 link