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

嘿，这个场景太扎心了——第三方库一刀切移除所有焦点样式搞砸无障碍，又没法改库或者分叉，还不想自己写自定义样式破坏原生浏览器的体验对吧？我来给你个精准的解决办法：

核心思路是用CSS的revert值完全还原浏览器的原生焦点样式，不用自己模拟或者硬写固定样式。具体代码如下：

/* 覆盖第三方库的 outline: 0 规则，恢复原生焦点样式 */
:focus {
  outline: revert !important;
}

为什么这能解决问题？ #

• revert这个CSS关键字会让属性值直接回到用户代理（浏览器）的默认样式，正好对应你在开发者工具里关掉第三方库规则后看到的原生效果（比如Chrome里的outline: -webkit-focus-ring-color auto 5px;）。
• 加!important是无奈之举——第三方库的选择器优先级可能不低，用它能确保我们的规则能覆盖掉库的样式。

可选的精细化优化 #

如果你担心!important影响范围太广，可以针对性地只给可聚焦元素设置：

button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:not([tabindex="-1"]):focus {
  outline: revert !important;
}

旧浏览器降级方案 #

如果需要兼容不支持revert的旧版浏览器（比如IE），可以用outline: auto替代，它同样会唤起浏览器的默认焦点轮廓：

:focus {
  outline: auto !important;
}

这样既不用自定义轮廓样式，又能让键盘用户正常看到焦点状态，完美解决无障碍问题～

内容的提问来源于stack exchange，提问作者Bryce Johnson