更改 mat-select 中复选框的大小 multiple

Question

我目前正在构建一个 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>

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

提前致谢。

Answer 1

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

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

要操纵 ✓，您可以编辑 mat-pseudo-checkbox-checked::after class:

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

Here 是工作示例

Answer 2

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

.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

更改 mat-select 中复选框的大小 multiple

Change size of the checkbox in mat-select multiple

angularjs

angular-material