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

【问题标题】：How to mimic the orange outline on focus?如何模仿焦点上的橙色轮廓？
【发布时间】：2013-09-07 20:26:48
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

:focus {
    declaration block
}

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

【讨论】：