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

【问题标题】：Change size of the checkbox in mat-select multiple在 mat-select multiple 中更改复选框的大小
【发布时间】：2021-09-04 18:15:28
【问题描述】：

我目前正在构建一个 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 上搜索了问题，但没有找到令人满意的答案。我希望有人回答这个问题。

提前致谢。

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

要改变复选框的大小，你需要编辑这个类.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 是工作示例

【讨论】：

【解决方案2】：

查看您的代码，似乎某些 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

【讨论】：