javascript - 如何删除集中的 contenteditable pre 周围的边框？

Question

当我将 pre 元素设置为 contenteditable 并将焦点放在其中进行编辑时，它会收到一个看起来不太好的虚线边框。当焦点在其他地方时，边界不存在。
如何删除该边框？

谢谢

Answer 1

将outline属性设置为0px solid transparent;。您可能还必须在:focus状态上设置它，例如：

[contenteditable]:focus {
    outline: 0px solid transparent;
}

Answer 2

您还可以将:read-write伪类添加到可编辑的样式元素中。

例如（jsFiddle）：

.element:read-write:focus {
     outline: none;
}

在这里阅读更多关于 codrops 的信息。

:read-writeChrome、Safari 和 Opera 14+ 以及 iOS 支持伪类选择器。-moz-Firefox 中的前缀支持它，格式为:-moz-read-write. :read-writeInternet Explorer 和 Android 不支持选择器。