如何去除聚焦的contenteditable pre标签周围的边框？

Question

当我将pre元素设置为可编辑并将焦点放在该元素上进行编辑时，它周围会出现一个点状边框，看起来不太好看。当焦点不在此元素上时，边框消失了。
我该如何去除这个边框呢？

谢谢！

- Christoffer

Answer 1

将outline属性设置为0px solid transparent;。您可能还需要在:focus状态下进行设置，例如：

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

- Marius

---

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

供参考： [contenteditable]:focus { outline: 0px solid transparent; } 的翻译如下：当元素为 contenteditable 且处于焦点状态时，将其轮廓设置为透明的无色边框。 - Alf Eaton

谢谢大家。救了我的一天。FYI，我只在Chrome上看到了轮廓线。Firefox和IE11没有显示它。 - nevf

你可以简单地使用 outline: none。 - Yves M.

阿尔夫，你的评论应该标记为答案 :> - Shai UI

这个答案不应该被接受，因为它缺乏关于为什么首先显示边框的重要上下文，并给出了错误的建议（仅仅删除默认的焦点样式而不提供任何替代方案）。 - Alexander Chudesnov

Answer 2

你也可以添加 :read-write 伪类来为可编辑元素设置样式。

例如（jsFiddle）:

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

在这里阅读更多相关内容。

:read-write伪类选择器在Chrome、Safari和Opera 14+以及iOS上得到支持。 在Firefox中，它以-moz-前缀的形式:-moz-read-write得到支持。 :read-write选择器不支持Internet Explorer和Android。

- morkro

---

这和.element:focus有什么区别？ - JJJ

仅适用于可编辑内容的选择器。 - morkro

与[contenteditable]:focus相比，使用它有什么好处？ - Joel

也就是说，:enabled 伪选择器。 - Walle Cyril

这个答案没有提供浏览器最初为什么添加轮廓的上下文，并且没有提到如果删除默认轮廓，则必须提供自定义焦点样式。 - Alexander Chudesnov

Answer 3

不要在没有提供替代方式的情况下移除内置的焦点样式，此功能对于数百万使用键盘浏览网页或使用焦点轮廓辅助导航的视力受损人群至关重要。

关于这个话题的一个好建议例子来自HTML Living Standard(https://html.spec.whatwg.org/multipage/interaction.html#element-level-focus-apis)：

[为了隐藏焦点环，请]使用:focus-visible伪类覆盖'outline'属性，并提供一种不同的方式来显示哪个元素具有焦点。请注意，如果没有提供可替代的聚焦样式，则主要使用键盘导航的人或使用焦点轮廓来帮助他们导航页面的视力减退人群将无法有效地使用页面。

例如，要从文本区域元素中隐藏轮廓并改为使用黄色背景表示焦点，可以使用：

textarea:focus-visible { outline: none; background: yellow; color: black; }

- Alexander Chudesnov