How do I remove the border around a focused contenteditable pre?

Question

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

Marius · Accepted Answer · 2017-01-12T07:46:58.320

222

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

edited Jan 12 '17 at 07:46

answered Feb 14 '10 at 10:49

Marius

57,995
32
132
151

6

@Christoffer: `outline` will not work in IE7 or lower. In these browsers, you need to set the `hideFocus` property of the element to `true`, ie `$('#myEl').get().hideFocus = true;` – Andy E Feb 14 '10 at 12:04
13

For reference: `[contenteditable]:focus { outline: 0px solid transparent; }` – Alf Eaton Jan 10 '14 at 16:31
Thanks all. Saved the day. FYI I'm only seeing the outline on Chrome. Firefox and IE11 don't show it. – nevf Jan 06 '15 at 05:38
6

You can also simply use `outline: none` – Yves M. Jan 05 '16 at 17:02
Alf, your comment should be marked as the answer :> – Shai UI Jan 11 '17 at 21:47
This answer should not have been accepted as it lacks important context about _why_ is that border being displayed there in the first place and gives bad advice (simply removing the default focus style and not providing any replacement). – Alexander Chudesnov Oct 04 '22 at 12:11

score 17 · Answer 2 · answered Feb 04 '15 at 23:38

17

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.

answered Feb 04 '15 at 23:38

morkro

4,336
5
25
35

What's the difference between this and `.element:focus`? – JJJ Jul 03 '15 at 17:29
1

It only applies to selectors which are contenteditable. – morkro Jul 03 '15 at 17:32
7

Any benefit using that over `[contenteditable]:focus`? – Joel May 09 '16 at 15:26
also :enabled pseudo selector – Walle Cyril Jan 18 '18 at 18:23
This answer fails to provide context about why outline was added by the browser in the first place and doesn't mention that a custom focus style must be provided if the default outline is removed. – Alexander Chudesnov Oct 04 '22 at 12:16

score 0 · Answer 3 · answered Oct 04 '22 at 12:14

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

How do I remove the border around a focused contenteditable pre?

3 Answers3

Linked