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

Question

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

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

这行得通，但我还希望浏览器的默认轮廓显示在这个焦点元素上。
有什么简单的解决方案可以实现这一目标吗？

Answer 1

通过元素的 :focus 伪选择器和 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 .