2010-11-26 87 views
12

這個點擊指示器是我最近的web項目的一個令人厭惡的部分..我討厭這個! - 我怎麼能說我的Firefox瀏覽器,他不應該標記點擊的對象?CSS Firefox - 如何取消虛線邊框(firefox click indicator)?

alt text

+1

徹底消除了輪廓不提供某種:焦點或:主動視覺指示在您的輔助功能中引發路障。那些使用鍵盤來瀏覽你的站點的用戶依靠這些輪廓來指示他們已經選擇了哪個元素。你可以設計它們,但我不會完全刪除它們。 – zxbEPREF 2013-01-10 19:15:42

+1

以上由clrux評論已死亡。有時最好將焦點指示器添加到子元素以獲得更好的顏色對比度和視覺可訪問性。希望這是人們試圖在這裏實施的東西。只是刪除焦點指標,這是一個很大的不是。 – 2015-10-02 21:02:32

回答

19

只要你的菜單項都沒有輸入元素(比如按鈕),您可以使用CSS,像這樣隱藏:

element { outline: none; } 
13

一個{ 輪廓:無; }

+1

在我的情況下,我必須添加!重要的是讓它堅持下去。 – 2013-10-17 21:40:31

0

你可能討厭它,但你的客戶可能不會。一般來說,覆蓋瀏覽器功能是混淆用戶並激勵他們不訪問您的網站的好方法。

+0

是的,我同意。一致的用戶體驗是一個好的網站的a和o ..但是一些網站需要打破這些usabillity規則。 – Tomkay 2010-11-26 14:25:47

0

瘋狂的解決方案:

input[type="button"]::-moz-focus-inner{ 
    border: 1px dotted transparent; 
} 

,但我不喜歡它。

的確,當我點擊它時,Firefox 12.0確實在input type =「button」上點了一個點。 outline:none無助於:active, :focus, ...

11

沒有什麼幫助(火狐20.1),直到此:

a:focus, a:active, 
button, 
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 { 
    outline: none !important; 
} 
1

更具體爲@揚 - karadimas,你可以刪除懸停大綱(假設鼠標輸入),但離開它爲焦點(假設鍵盤輸入)。這將保留大部分的可訪問性。話雖這麼說:

element:hover { outline: none; } 
element:focus { // leave the focus } 
2

這是更準確:

a { outline: none!important; } 
1

基於this post,增加outline:0也將這樣的伎倆。

.selector{ outline:0; } 

如果你不希望有顯示在您的網站上的任何元素的邊界,請嘗試以下,

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