禁用选定元素的突出显示答案

【问题标题】：Disable highlight of selected element禁用选定元素的突出显示
【发布时间】：2016-09-14 19:39:19
【问题描述】：

我正在尝试禁用所选元素的突出显示。

这是它目前的样子：

这是我想要实现的目标：

没有蓝色发光的唯一方法是单击没有图像按钮的位置，但即便如此，当我单击扩展图标时，它每次都会重新出现在第一个按钮上。

我早些时候在 StackOverflow 上遇到了问题 Remove Safari/Chrome textinput/textarea glow，但 CSS 属性 -webkit-appearance、outline、outline-color 和 outline-style 没有解决任何问题。

我在https://github.com/Usernamer/EmojiChrome 有一个 GitHub 存储库。

【问题讨论】：

您需要在弹出窗口中进行键盘控制，还是只需要鼠标点击？
@Xan 它完全依赖于鼠标点击。我试过键盘控制，但没用。

标签： html macos google-chrome-extension

【解决方案1】：

这个光晕是焦点输入元素的亮点。

:focus 伪选择器需要一个 CSS 规则（例如内联，但最好包含在单独的文件中）

<style>
  input:focus { outline: none; }
</style>

【讨论】：

我可以通过 HTML 使用：<script>input:focus { outline: none; }</script>吗？
如果是 CSS 而不是 JS，为什么会这样？此外，扩展中不允许内联JS代码。
啊，看看你的代码我发现了问题。好吧，生活和学习：MDN on <style> element。把它放在一个单独的 CSS 文件中可能会更干净。