如何模仿焦点上的橙色轮廓？

Posted 2023-03-06

【中文标题】如何模仿焦点上的橙色轮廓？

【英文标题】：How to mimic the orange outline on focus?

【发布时间】：2013-09-07 20:26:48

【问题描述】：

我正在创建一组用户可以使用选项卡导航的 div，并且我想将标准的橙色焦点轮廓添加到元素中。

有谁知道我需要做什么才能添加它？我知道它适用于轮廓属性，但我不确定将其设置为什么颜色，或者我是否最好使用带有一点模糊的盒子阴影来获得相同的效果。

另外，如果它是相关的，我正在使用 dojo 并避免使用 jquery - 但希望这是一个纯 css 解决方案:)

【问题讨论】：

我不知道您将要实现什么，如果您将代码放在 jsfiddle 中会有所帮助（如果您尝试过）

【参考方案1】：

我建议这个工作jsFiddle，注意为了完成这个你必须使用<div tabindex="0"></div>。

每个浏览器都以不同的方式呈现焦点。为了统一您网站的整体体验，我建议使用 CSS 删除浏览器轮廓并添加您自己的样式。

据我所知，只有 Chrome 会渲染橙色轮廓，我已尝试尽可能地匹配颜色，但您始终可以自己尝试。

【讨论】：

@Emma 还有一点你可能需要注意，CSS 中有一个border-radius: 2px;，以实现 Chrome 轮廓的略微圆润设计。

【参考方案2】：

您可以使用 css :focus 伪选择器

:focus 
    declaration block

虽然div属性不接受输入，所以一般不能有:focus。因此，您必须将 div 设置为具有 tabindex 属性