CODEWITHSUNDEEP
javascriptjquerycontenteditable
Christoffer
Christoffer

Reputation: 26865

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

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

Upvotes: 123

Views: 59734

Answers (4)

themuffineman
themuffineman

Reputation: 11

If you're using react this is what worked for me, use style instead of className:

           <div
              contentEditable={true}
              className="w-full relative "
              style={{
                outline: "none",
                userSelect: "text",
                whiteSpace: "pre-wrap",
                overflowWrap: "break-word",
                height: "100px",
              }}
            />

Upvotes: 0

Alexander Chudesnov
Alexander Chudesnov

Reputation: 134

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

Upvotes: -3

Marius
Marius

Reputation: 59009

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

Upvotes: 231

morkro
morkro

Reputation: 4675

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.

Upvotes: 21

Related Questions