恢复所有焦点项目上的Chrome / Safari / Firefox / IE8 +大纲

Question

我们正在使用一些包含可怕:focus {outline: none;}的JavaScript库。 我不想搞乱这些库，因为下次升级库时，我的代码将丢失。

例如（唉，不是唯一的此类库），FlexSlider具有以下代码：

.flex-container a:hover, 
.flex-slider a:hover, 
.flex-container a:focus, 
.flex-slider a:focus  
  { outline: none; } 

我发现有一个帖子Restore Webkit's CSS outline on input field，我们实际上使用了该代码。

:focus 
  { outline: auto 5px -webkit-focus-ring-color; }

然而，这使我们的Firefox和IE访问者没有轮廓。如何在CSS文件中进行跨浏览器大纲恢复？

我认为我可以使用jQuery来删除有问题的规则，但如果他们更改了自己的库，则会受到破坏，并且无法帮助禁用JavaScript的访问者。

我也在想我能做到：

*:focus
  { outline: inherit !important; }

但是想知道是否会出现意想不到的后果，例如在浏览器中为不同的标签设置不同的大纲样式。

您可以在深绿色区域右侧滑块中的San Francisco Municipal Transportation Agency home page上看到此操作。

Answer 1

在Bootstrap中找到它

a:focus { 
  outline: thin dotted; 
  outline: 5px auto -webkit-focus-ring-color; 
  outline-offset: -2px; 
}

不确定轮廓偏移量;这可能是一种风格决定。