Skip to content
Related Articles

Related Articles

Improve Article
How to remove border from an editable element using CSS ?
  • Last Updated : 14 Dec, 2020

Given an HTML document containing some document and the task is to remove border from an editable element using CSS. It is a default behavior of any element which have content-editable attributes set to true whenever, the element gets a focus it will get a border around them. The task can be done by using the [attribute] selector to select all elements that are contenteditable, and remove the border with the outline property.  

Example:   

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        [contenteditable] {
            outline: 0px solid transparent;
        }
    </style>
</head>
  
<body>
    <center>
        <h2>GeeksForGeeks</h2>
  
        <h2>
            How to remove the border from 
            an editable element with CSS?
        </h2>
  
        <p contenteditable="true">
            This paragraph is editable
        </p>
  
    </center>
</body>
  
</html>

Output:

Before Editing on Element:



After Editing on Element: 

  

My Personal Notes arrow_drop_up
Recommended Articles
Page :