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

nukf8bse 于 2021-09-29 发布在 Java

关注(0)|答案(2)|浏览(344)

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

来源：https://stackoverflow.com/questions/68061749/change-size-of-the-checkbox-in-mat-select-multiple

2条答案

按热度按时间

bvjveswy1#

要更改复选框的大小，您需要编辑此类 .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;
}

下面是一个工作示例

赞(0）回复(0）举报 2021-09-29

xghobddn2#

查看您的代码，似乎有一些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);
}

这是工作示例工作链接

赞(0）回复(0）举报 2021-09-29

我来回答

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

2条答案

相关问题

热门标签

最新问答