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

Question

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

:focus {
  outline: 0;
}

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

当我在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声明以获得良好衡量标准。

无需为用户代理特定值而烦恼。