在summernote焦点状态上设置边框颜色答案

【问题标题】：Set border color on summernote focus state在summernote焦点状态上设置边框颜色
【发布时间】：2018-08-10 17:29:23
【问题描述】：

我想在焦点上将summernote div的边框颜色设置为浅蓝色，并在焦点输出时将其设置回中性。

我设法通过使用以下方法消除了 div 周围的阴影：

div.note-editor.panel.panel-default {
    box-shadow: none;
}

我遇到的问题是我没有找到在聚焦时设置其状态样式的方法。使用 .focused 或 :focus 也无济于事。

【问题讨论】：

标签： jquery css html summernote

【解决方案1】：

根据 MDN 文档，:focus 表示已获得焦点的元素（例如表单输入）。另一方面，:active表示用户正在激活的元素（例如按钮）。在您的情况下，它将是 :active 而不是 :focus。

div.note-editor.panel.panel-default {
  box-shadow: none;
  cursor: pointer;
}

div.note-editor.panel.panel-default:active {
 outline: 1px solid blue;
}

<div class="note-editor panel panel-default">
  Hello Focus
</div>

【讨论】：

我实际上想在整个面板的焦点上添加轮廓/边框，但是使用 :focus 和轮廓对我来说也没有成功。
这是我第一次设置，但这应该可以工作：jsfiddle.net/hfmhkc81/2/#&togetherjs=UUvfSpw7yM
您需要使用 :active 而不是 :focus。请查看我的更新答案
有效！彩色边框出现了，但在我在 html 编辑器中输入时它并没有保留。有什么方法可以实现吗？
这种情况下需要js来处理