Angular多选选择列表隐藏复选框后选中背景异常问题

问题原因 #

隐藏复选框时，破坏了Angular Material默认选中状态的样式关联逻辑，导致选中项背景高亮显示异常。

修复方案 #

1. 正确隐藏复选框 #

避免直接用display: none或visibility: hidden移除元素，改用视觉隐藏但保留组件状态检测的方式：

.mat-pseudo-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

2. 强制修复选中项背景样式 #

显式覆盖选中、hover、激活状态的背景色，确保交互视觉正常：

/* 选中状态背景 */
.mat-list-option.mat-selected:not(.mat-option-multiple) {
  background-color: rgba(0, 128, 0, 0.1);
}

/* 选中时hover状态背景 */
.mat-list-option.mat-selected:not(.mat-option-multiple):hover {
  background-color: rgba(0, 128, 0, 0.15);
}

/* 点击激活状态背景 */
.mat-list-option:active {
  background-color: rgba(0, 128, 0, 0.2);
}

3. 确保列表项点击交互正常 #

若隐藏复选框后点击区域失效，可手动绑定选中切换逻辑：
在组件TS中添加方法：

toggleSelection(option: MatListOption) {
  option.selected = !option.selected;
}

模板中绑定点击事件：

<mat-selection-list>
  <mat-list-option (click)="toggleSelection(option)" *ngFor="let item of items" #option>
    {{ item.name }}
  </mat-list-option>
</mat-selection-list>

关键说明 #

• 视觉隐藏复选框而非移除，保证Angular Material内部选中状态逻辑不受干扰
• 显式指定各交互状态的背景色，解决默认样式被破坏后的显示异常
• 手动绑定点击事件，避免隐藏复选框导致的交互区域失效问题

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