How to remove the border of editable content

Learn how to remove the border from editable elements.

Remove the border of editable content

By default, when you are in contenteditable Set to true When you write content within the element, the element gets a border when 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 attribute:

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

Try it yourself

Related pages

Reference manual:HTML contenteditable 属性

Reference manual:CSS [attributeselector