如何覆盖 `outline:0` 并恢复到用户代理样式表的焦点样式？答案

【问题标题】：How to override `outline:0` and revert to user agent stylesheet's focus styles?如何覆盖 `outline:0` 并恢复到用户代理样式表的焦点样式？
【发布时间】：2018-08-29 16:04:51
【问题描述】：

我们使用第三方样式库从所有可聚焦元素中移除焦点样式，如下所示：

:focus {
  outline: 0;
}

这对于可访问性来说很糟糕，但我们无法删除或分叉该库。

当我在 devtools 中关闭规则时，我们恢复到 useragent 样式表，在 Chrome 中是：

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

如果可以避免的话，我不想设置自定义大纲样式来覆盖用户代理。我也很想避免为每个可能的用户代理样式表硬编码样式。

但是the docs for outline 并没有真正给我任何线索。例如，outline: initial 似乎没有恢复浏览器默认值。有谁知道如何解决这个问题？

【问题讨论】：

你可以试试outline: initial
outline: initial 似乎没有任何改变。
好吧，简短的回答是你不能......如果用户 anget 样式被更改，你将永远无法将它们恢复，它们仅在没有指定样式的情况下使用.. 一旦你指定style 代理风格完全被忽略

标签： css accessibility

【解决方案1】：

最好的解决方案是从您的第三方样式库 CSS 中删除焦点选择器。

如果这是不可能的，那么我建议在您的第三方 CSS 之后加载的样式表中添加一个覆盖。

应该这样做：

    :focus {
        outline: 4px solid red;
    }

如果您愿意，您甚至可以添加 !important 声明以获得良好的效果。

无需担心用户代理的特定值。

【讨论】：