如何删除聚焦的可内容的 pre 的边框？

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

谢谢

53259 次浏览

小开

最佳答案

Set the outline property to 0px solid transparent;. You might have to set it on the :focus state as well, for example:

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

小开

You can also add the :read-write pseudo-class to style elements that are editable.

For instance (jsFiddle):

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

Read more here on codrops.

The :read-write pseudo-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-write selector is not supported in Internet Explorer and on Android.

小开

Never remove built-in focus styles without providing a replacement, this feature is essential for millions of people who are using the web without a mouse.

An example of good advice on this topic from the HTML Living Standard ( https://html.spec.whatwg.org/multipage/interaction.html#element-level-focus-apis):

[in order to hide the focus ring] use the :focus-visible pseudo-class to override the 'outline' property, and provide a different way to show what element is focused. Be aware that if an alternative focusing style isn't made available, the page will be significantly less usable for people who primarily navigate pages using a keyboard, or those with reduced vision who use focus outlines to help them navigate the page.

For example, to hide the outline from textarea elements and instead use a yellow background to indicate focus, you could use:

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