在焦点元素上设置轮廓边框

Question

我的代码将某些按钮点击事件中的各种项目加载到文档中 一旦使用以下代码显示所有新项目，我设法将焦点正确地设置在第一项上：

$(function () {
    $("a.getfocus").focus();                            
});

这可行，但我还希望浏览器的默认大纲显示在此焦点项目。
有没有简单的解决方案来实现这一目标？

Answer 1

使用元素的:focus pesudoselector和outline属性：

outline: [properties]

说，你有一个链接，通常显示焦点轮廓（是的，这是默认行为）：

<a id="test" href="https://test.com">Test</a>

使用CSS，您可以执行以下操作：

#test {
    outline: 1px dotted red;
}

获得红色轮廓。通常，你想做：

a {
    outline: none;
}

回到你的问题，你可以这样做：

a:focus {
    ...
    // rules
    ...
}

您可以看到一个小样本here。