单击鼠标时从列表框选项中删除焦点

问题描述 投票:0回答:1

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

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

我的问题是,使用鼠标与组合框交互时如何删除此焦点?我想在仅使用键盘与组合框交互时保持焦点。

任何形式的反馈将不胜感激。非常感谢!

html css accessibility uiaccessibility wcag
1个回答
0
投票

有一个新的 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;
}
© www.soinside.com 2019 - 2024. All rights reserved.