Javascript 如何移除聚焦的 contenteditable pre 周围的边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2260782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I remove the border around a focused contenteditable pre?
提问by Christoffer
When I set a pre element to contenteditable and put focus in it for editing, it receives a dotted border around it that doesn't look very nice. The border isn't there when focus is somewhere else.
How do I remove that border?
当我将 pre 元素设置为 contenteditable 并将焦点放在其中进行编辑时，它会收到一个看起来不太好看的虚线边框。当焦点在其他地方时，边界不存在。
我如何删除该边框？
Thanks
谢谢
回答by Marius
Set the outlinepropertyto 0px solid transparent;. You might have to set it on the :focusstate as well, for example:
将outline属性设置为0px solid transparent;。您可能还必须在:focus状态上设置它，例如：
[contenteditable]:focus {
outline: 0px solid transparent;
}
回答by morkro
You can also add the :read-writepseudo-class to style elements that are editable.
您还可以将:read-write伪类添加到可编辑的样式元素。
For instance (jsFiddle):
例如（jsFiddle）：
.element:read-write:focus {
outline: none;
}
Read more here on codrops.
在此处阅读有关 codrops 的更多信息。
The
:read-writepseudo-class selector is supported in Chrome, Safari, and Opera 14+, and on iOS. It is supported with the-moz-prefix in Firefox in the form:-moz-read-write. The:read-writeselector is not supported in Internet Explorer and on Android.
该
:read-write伪类选择器在Chrome，Safari和Opera 14+，而在iOS的支持。-moz-Firefox 中的前缀支持它的形式为:-moz-read-write。该:read-write选择器无法在Internet Explorer和Android上的支持。
