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

Question

我正在创建一组div，用户可以使用tab浏览它，我想将标准的橙色焦点轮廓添加到元素中。

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

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

Answer 1

您可以使用css：focus Pseudo selector

:focus {
    declaration block
}

虽然div属性不接受输入，但它不能正常:focus。因此，您必须将div设置为tabindex属性

Answer 2

我建议这项工作jsFiddle，请注意，为了实现这一目标，您必须使用<div tabindex="0"></div>。

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

据我所知，只有Chrome呈现橙色轮廓，我尽可能地尽可能地匹配颜色，但您可以随时进行实验。