How to remove border of editable content

Learn how to remove borders from editable elements.

Remove border of editable content

By default, when you are in contenteditable Set to true When you write content inside the element, the element will get a border when it is focused.

But, you can use CSS to remove the border:

Step 1 - Add HTML:

<p contenteditable="true">This is an editable paragraph.</p>

Step 2 - Add CSS:

Use [Attribute] The selector selects all contenteditable elements and uses outline Remove border of attribute:

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

Try It Yourself

Related Pages

Reference Manual:HTML contenteditable 属性

Reference Manual:CSS [AttributeSelector