如何禁用Fluent UI Listbox鼠标按下时的黑色粗边框？

那个黑色粗边框是组件的焦点轮廓样式，由于Fluent UI组件基于Shadow DOM封装，直接给fluent-listbox设置边框样式无法穿透到内部元素，你可以通过以下两种方法禁用它：

方法1：使用组件暴露的CSS Part修改样式 #

Fluent Listbox组件暴露了focus-outline这个CSS Part，用于控制焦点轮廓的样式，你可以通过以下CSS隐藏它：

fluent-listbox::part(focus-outline) {
  display: none;
}

如果担心隐藏后布局跳动，也可以将轮廓设为透明保留占位：

fluent-listbox::part(focus-outline) {
  border-color: transparent;
}

方法2：通过自定义CSS变量覆盖 #

Fluent UI提供了全局自定义变量来控制焦点边框宽度，直接设置--focus-stroke-width为0即可：

fluent-listbox {
  --focus-stroke-width: 0px;
}

注意：如果你的Listbox是多选模式或者有特殊状态，建议测试不同交互场景下的表现，确保不会影响可访问性（比如键盘导航时的焦点提示，若完全隐藏可能对键盘用户不友好，可考虑替换为更柔和的焦点样式）。

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