javascript - How do I remove the border around a focused contenteditable pre? - Stack Overflow

admin管理员组

文章数量:1134248

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?

Thanks

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?

Thanks

• javascript
• jquery
• contenteditable

Share Improve this question Follow asked Feb 14, 2010 at 10:47 ChristofferChristoffer 26.8k1818 gold badges5454 silver badges7777 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 231

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; }

本文标签： javascriptHow do I remove the border around a focused contenteditable preStack Overflow