仅通过单击鼠标从列表框选项中删除焦点

Question

我正在实现以下组合框：https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/

您可以从上面链接中的示例代码中注意到，当我用鼠标单击组合框时，列表框中所选选项周围有一个蓝色焦点。

使用鼠标与组合框交互时如何删除此焦点？我想在仅使用键盘与组合框交互时保持焦点。

Answer 1

有一个新的 CSS 选择器

:focus-visible

，旨在通过仅定位通过键盘输入聚焦的元素来解决这种情况。

此 CSS 使鼠标单击时聚焦在列表框上：

.combo-input:focus {
    border-color: #0067b8;
    box-shadow: 0 0 4px 2px #0067b8;
    outline: 4px solid transparent;
}

更改为：

.combo-input:focus-visible {
  border-color: #0067b8;
  box-shadow: 0 0 4px 2px #0067b8;
  outline: 4px solid transparent;
}