如何修改样式让mat-select下拉框已选中项不显示特殊选中效果

数据老陈

2026-10-5

解决mat-select历史选中项高亮问题的方案

你可以通过样式覆盖的方式实现需求，根据你使用的Angular Material版本选择对应的方法即可：

方法1：全局生效修改

适用于所有mat-select都需要作为菜单使用、不需要选中高亮的场景：

若使用Angular Material 15+（MDC重构版本），在全局样式文件styles.scss中添加以下代码：

.mdc-list-item.mat-mdc-option.mat-selected {
  /* 清除选中状态背景色 */
  --mdc-list-list-item-selected-container-color: transparent;
  /* 文字颜色和普通选项保持一致 */
  --mdc-list-list-item-label-text-color: inherit;
  /* 可选：隐藏选中项前的勾选图标 */
  .mat-mdc-option-pseudo-checkbox {
    display: none;
  }
}

若使用Angular Material 14及更早版本，在全局样式文件中添加以下代码：

.mat-option.mat-selected {
  background: transparent !important;
  color: inherit !important;
}
/* 可选：隐藏选中项前的勾选图标 */
.mat-option.mat-selected .mat-pseudo-checkbox {
  display: none !important;
}

方法2：局部生效修改

仅给指定的mat-select关闭选中高亮，避免影响其他正常使用的选择框：

给目标mat-select添加自定义类

<mat-select class="no-highlight-menu">
  <!-- 选项内容 -->
</mat-select>

全局样式文件中添加对应样式（以Angular Material 15+为例，旧版本替换对应类名即可）

.no-highlight-menu {
  .mdc-list-item.mat-mdc-option.mat-selected {
    --mdc-list-list-item-selected-container-color: transparent;
    --mdc-list-list-item-label-text-color: inherit;
    .mat-mdc-option-pseudo-checkbox {
      display: none;
    }
  }
}