css - 如何覆盖 `outline:0` 并恢复为用户代理样式表的焦点样式？

Question

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

:focus {
  outline: 0;
}

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

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

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

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

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

Answer 1

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

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

应该这样做:

    :focus {
        outline: 4px solid red;
    }

如果您愿意，您甚至可以添加一个 !important 声明作为良好的衡量标准。

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