更改角材料选择列表中的复选框大小答案

【问题标题】：Change Checkbox Size in Angular Material Selection List更改角材料选择列表中的复选框大小
【发布时间】：2019-02-03 10:46:53
【问题描述】：

是否可以更改Angular Material Selection List 中复选框的大小？我尝试在 CSS 中更改 mat-pseudo-checkbox 的大小，但这会导致未正确放置复选标记：

mat-pseudo-checkbox {
  height: 10px;
  width: 10px;
}

我需要调整另一个选择器来纠正这个问题吗？

【问题讨论】：

【解决方案1】：

是的，复选标记只是复选框中的一个伪元素。您可以像使用盒子本身一样覆盖它的样式。

对于 10px 框大小的情况，以下 CSS 可以工作（对于其他大小，值需要调整）：

.mat-pseudo-checkbox-checked::after {
    top: 0px;
    left: -1px;
    width: 6px;
    height: 2px;
}

【讨论】：

【解决方案2】：

使用 Angular 7 我成功了：

mat-checkbox ::ng-deep .mat-checkbox-inner-container {width: 30px;height: 30px;}

【讨论】：

【解决方案3】：

我遇到了类似的问题并尝试了下面的 CSS，它似乎在 Angular 8 中工作：

::ng-deep .mat-checkbox .mat-checkbox-inner-container {
    width: 30px;
    height: 30px;
}

我已经添加了样本宽度和高度；请根据您的需要定制这些。

【讨论】：