2010-11-26 89 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; }