在焦點元素上設置輪廓邊框

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
    ...
}

您可以在這里看到一個小樣本。