以编程方式聚焦时不会出现焦点轮廓？答案

【问题标题】：Focus outline doesn't appear when focused programmatically?以编程方式聚焦时不会出现焦点轮廓？
【发布时间】：2015-03-12 03:25:45
【问题描述】：

如果我有一个<div tabindex="1" id="mydiv">content</div>，我可以点击它，它会显示一个轮廓，document.activeElement 指向这个元素。

但是，如果我运行 document.getElementById('mydiv').focus()，则该元素会出现在 document.activeElement 中，但不会显示轮廓。

我怎样才能让它在以编程方式聚焦时显示大纲？我不希望使用我杂耍的类来设置轮廓的样式，因为我希望它在用户采取任何会使其模糊的操作时消失。

【问题讨论】：

你能添加一个有效的例子吗？（或非示例）
它似乎在这里工作 - jsfiddle.net/e6vtm75h 编辑：似乎在 Chrome 中工作；不是火狐。
如何让 div 聚焦？猜对 ARIA 的支持？

标签： javascript html focus

【解决方案1】：

我是这样做的。

const element = document.querySelector(".the-element-you-wanna-focus-on")
element.focus()

.the-element-you-wanna-focus-on {
  &:focus,
  &:focus-visible {
    outline: auto 2px Highlight;
    outline: 5px auto -webkit-focus-ring-color;
  }
}

What is -webkit-focus-ring-color?

【讨论】：