解决Angular复选框取消选中后鼠标移出光晕不消失问题

当取消选中Angular Material复选框后，鼠标移出时光晕（焦点环）会残留，这是因为复选框在交互后仍保持焦点状态。下面提供几种可行的解决方法：

方法1：自定义指令（推荐，复用性强） #

创建一个自定义指令，监听复选框的状态变化和鼠标移出事件，在合适时机移除焦点：

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[matCheckboxClearHalo]'
})
export class MatCheckboxClearHaloDirective {
  constructor(private el: ElementRef) {}

  @HostListener('change', ['$event'])
  onChange(event: Event): void {
    const checkbox = event.target as HTMLInputElement;
    // 仅在取消选中时处理
    if (!checkbox.checked) {
      // 加个小延迟避免打断交互
      setTimeout(() => {
        this.el.nativeElement.blur();
      }, 100);
    }
  }

  @HostListener('mouseleave')
  onMouseLeave(): void {
    const checkbox = this.el.nativeElement as HTMLInputElement;
    if (!checkbox.checked) {
      this.el.nativeElement.blur();
    }
  }
}

在你的Angular模块中声明该指令，之后直接在复选框上使用即可：

<mat-checkbox matCheckboxClearHalo>示例复选框</mat-checkbox>

方法2：全局CSS覆盖 #

如果不想写指令，也可以通过CSS精准控制未选中复选框的焦点样式，同时保留键盘导航的焦点提示（兼顾可访问性）：

/* 移除未选中且非键盘聚焦时的光晕 */
.mat-checkbox:not(.mat-checkbox-checked):not(:focus-visible) .mat-checkbox-frame {
  box-shadow: none !important;
}

/* 针对焦点状态的补充控制 */
.mat-checkbox:not(.mat-checkbox-checked):focus:not(:focus-visible) .mat-checkbox-frame {
  outline: none;
  box-shadow: none;
}

方法3：组件内直接处理事件 #

如果只是单个组件需要处理，可以直接在模板绑定事件并在组件类中实现逻辑：

模板代码：

<mat-checkbox (change)="handleCheckboxChange($event)" (mouseleave)="handleCheckboxMouseLeave($event)">示例复选框</mat-checkbox>

组件类代码：

import { MatCheckboxChange } from '@angular/material/checkbox';

// ...

handleCheckboxChange(event: MatCheckboxChange): void {
  if (!event.checked) {
    setTimeout(() => {
      event.source._elementRef.nativeElement.blur();
    }, 100);
  }
}

handleCheckboxMouseLeave(event: MouseEvent): void {
  const input = (event.target as HTMLElement).querySelector('input') as HTMLInputElement;
  if (input && !input.checked) {
    input.blur();
  }
}

方案选择建议 #

• 若多个组件都有此需求，优先选方法1的自定义指令，复用性最高；
• 快速解决全局问题选方法2的CSS方案，注意控制样式作用范围；
• 单个组件临时处理选方法3，实现简单直接。

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