如何删除内容可编辑的重点周围的边框？

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

谢谢

javascript jquery contenteditable

— 克里斯托弗
source

Answers:

188

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

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

— 马吕斯
source

@Christoffer：outline在IE7或更低版本中不起作用。在这些浏览器中，您需要hideFocus将元素的属性设置为true，即$('#myEl').get().hideFocus = true;

— Andy E 2010年

供参考：[contenteditable]:focus { outline: 0px solid transparent; }

— Alf Eaton 2014年

谢谢大家保存了这一天。仅供参考，我仅在Chrome上看到轮廓。Firefox和IE11没有显示。

— nevf

您也可以简单地使用outline: none

— Yves M.

Alf，您的评论应标记为答案：>

— foreyez

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

例如（jsFiddle）：

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

该:read-write伪类选择器在Chrome，Safari和Opera 14+，而在iOS的支持。-moz-Firefox形式的前缀支持它:-moz-read-write。该:read-write选择器无法在Internet Explorer和Android上的支持。

— 莫尔克罗
source

和之间有什么区别.element:focus？

— JJJ

它仅适用于可编辑的选择器。

— morkro

有[contenteditable]:focus什么好处呢？

— 乔尔，

还：enabled伪选择器

— Walle Cyril