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

Question

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

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

我是否需要调整另一个选择器来解决这个问题？

Answer 1

是的，复选标记只是该复选框内的一个伪元素。您可以采用与框本身相同的方式覆盖它的样式。

对于具有10px框尺寸的情况，以下CSS将适用（对于其他尺寸，需要调整值）：

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

Answer 2

我使用Angular 7成功：

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