[Css] 如何刪除火狐的按鈕上的虛線輪廓以及鏈接?



Answers

無需定義選擇器。

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

但是,這違反了W3C的可訪問性最佳實踐。 大綱在那裡幫助那些用鍵盤進行導航。

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples

Question

我可以讓Firefox不要在鏈接上顯示醜陋的焦點輪廓:

a:focus { 
    outline: none; 
}

但是我怎樣才能為<button>標籤做到這一點? 當我這樣做時:

button:focus { 
    outline: none; 
}

當我點擊它們時,按鈕仍然有點焦點輪廓。

(是的,我知道這是一個可用性問題,但我想提供適合於設計的自己的焦點提示,而不是難看的灰點)




下面的鏈接為我工作,想到分享 - 如果有人感興趣。

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

乾杯!




[更新]此解決方案不再有效。 為我工作的解決方案是這一個https://.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 : http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html







下面的CSS代碼可以消除這個問題:

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



網絡上有許多解決方案,其中許多解決方案都有效,但為了強制執行此操作,因此一旦使用以下內容,絕對沒有任何方法可以突出顯示/聚焦:

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

這只是增加了一點額外的安全性並達成了交易!




與Bootstrap 3一起,我使用了這段代碼。 第二組規則只是取消了對於焦點/活動按鈕的引導程序:

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
  outline:0;
}

注意你的自定義css文件應該在你的html代碼中的Bootstrap css文件之後來覆蓋它。




它看起來像實現這一目標的唯一方法是設置

browser.display.focus_ring_width = 0

在每個瀏覽器的基礎上about:config。




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

哪裡button可以是任何你想禁用行為的CSS選擇器。




從鏈接,按鈕和輸入元素中刪除虛線輪廓。

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 {
    border: 0;
    outline : 0;
}



我想你應該通過刪除焦點輪廓來真正了解自己在做什麼,因為它可能會導致鍵盤導航和輔助功能混亂。

如果由於設計問題需要將其取出,請將:focus狀態添加到按鈕,以將其替換為其他視覺提示,例如將邊框更改為更亮的顏色或類似的東西。

有時候我覺得有必要把這個討厭的大綱拿出來,但我總是準備一個備用焦點視覺提示。

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




你可以在CSS中試試button::-moz-focus-inner {border: 0px solid transparent;}




Links