html - 当它有焦点时如何在这个 div 周围添加外部颜色？

Question

如果你看here然后单击密码框，它有一个黄色焦点矩形:

有问题的控件是一个输入，但我想对div 执行此操作。拿这段代码:

<div class="bbp-template-notice error" role="alert" tabindex="-1">
    <ul>
        <li><strong>ERROR</strong>: Your reply cannot be empty.</li>
        <li><strong>ERROR</strong>: Please solve Captcha correctly.</li>
    </ul>
</div>

我必须应用什么 CSS 样式才能获得这种黄色外层？

目前我有:

#bbpress-forums .bbp-template-notice {
    padding: 2px !important;
    border: solid 1px #000 !important;
    background: #708090;
}

结果如下:

非常感谢任何指导。

Answer 1

正如 Paulie_D 所建议的，outline 属性是您在元素获得焦点时所寻找的。如果您需要了解哪些选项可用于 outline 属性，W3 Schools有很棒的视觉效果，您可以查看