html - 键盘 TAB 选择不可见

Question

我有一个 Angular 应用程序，当我使用键盘 TAB 在元素周围移动时，当前聚焦的元素没有突出显示。

这是我 TAB 到一个元素时的样子

这是当我点击空格展开 accordionTab 的时候

然后我添加了以下 CSS，但它仅适用于鼠标悬停，但不适用于选项卡选择。

::ng-deep {
    .ui-accordion-header:hover, .ui-accordion-header:active, .ui-accordion-header:focus {
        border: solid #00a1cf 1px !important;
    }
}

我一直在测试，当我在 chrome 开发者工具中强制选择 focus 时它可以工作，但当我使用键盘选项卡选择时却没有。

我无法弄清楚为什么在使用键盘 TAB 键聚焦时它没有突出显示。谁能帮我吗？提前致谢:)

Answer 1

标记是什么样的？通常，当使用 Tab 键聚焦时，默认具有焦点的元素是:

• a( anchor )
• 按钮
• 输入
• 文本区域

如果您有不同类型的元素，例如 div，您可以尝试通过在标记中添加 tabindex 来为其提供焦点。