如何刪除Firefox在按鈕和連接上的虛線輪廓？

我可使Firefox在此連接上不顯示點狀的醜陋焦點：

a:focus { 
    outline: none; 
}

可是我該如何對<button>標籤執行此操做？ 當我這樣作時：

button:focus { 
    outline: none; 
}

單擊這些按鈕時，它們的焦點輪廓仍爲虛線。

（是的，我知道這是一個可用性問題，可是我想提供適合於設計的本身的焦點提示，而不是難看的灰色點）

---

#1樓

我認爲您應該經過刪除焦點輪廓來真正瞭解本身在作什麼，由於它可能會使鍵盤導航和輔助功能變得混亂。

若是因爲設計問題須要將其取出，請在按鈕上添加:focus狀態，以其餘視覺提示代替該狀態，例如將邊框更改成較亮的顏色或相似的顏色。

有時，我以爲有必要將煩人的輪廓刪除，但我老是準備備用焦點視覺提示。

永遠不要使用blur() js函數。 使用::-moz-focus-inner僞類。

---

#2樓

在網絡上能夠找到許多解決方案，其中許多工做有效，可是要強制這樣作，所以一旦使用如下命令，絕對沒有任何內容能夠突出顯示/聚焦：

::-moz-focus-inner, :active, :focus {
    outline:none;
    border:0;
    -moz-outline-style: none;
}

這隻會增長一點點額外的安全性並達成協議！

---

#3樓

若是您更喜歡使用CSS擺脫虛線輪廓：

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0;
    } 
/*for IE8 and below */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

---

#4樓

button::-moz-focus-inner { border: 0; }

其中的button能夠是您要禁用其行爲的CSS選擇器。

---

#5樓

[更新]此解決方案再也不起做用。 對我有用的解決方案是這個https://stackoverflow.com/a/3844452/925560

標記爲正確的答案不適用於Firefox 24.0。

爲了刪除Firefox在按鈕和錨標記上的虛線輪廓，我添加了如下代碼：

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

我在這裏找到了解決方案： http : //aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html