如何在Angular Material中隐藏指定mat-select的mat-pseudo-checkbox

要只隐藏特定mat-select中的勾选图标（mat-pseudo-checkbox），无需全局修改样式，通过自定义类+::ng-deep精准定位目标元素即可：

1. 保留模板中的自定义类 #

你的模板已经给目标mat-select添加了selectAll类，直接用这个类做定位标记：

<mat-form-field class="user-list">
    <mat-select class="selectAll">
       @for (user of userLists; track user) {
          <mat-option [value]="user.id">{{user.name}}</mat-option>
       }
    </mat-select>
</mat-form-field>

2. 编写精准的CSS样式 #

在组件的样式文件（.component.css/.component.scss）中添加以下代码：

::ng-deep .selectAll .mat-pseudo-checkbox {
  display: none;
}

若遇到样式优先级被Material默认样式覆盖的情况，可追加!important：

::ng-deep .selectAll .mat-pseudo-checkbox {
  display: none !important;
}

原理说明 #

• ::ng-deep能穿透Angular的组件样式隔离，访问到Material组件内部的元素
• 前置的.selectAll类确保样式仅作用于带有该类的mat-select内部的mat-pseudo-checkbox，不会影响页面上其他mat-select组件

内容的提问来源于stack exchange，提问作者songcraft