Open In App

How to remove border from an editable element using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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: 

  


Last Updated : 14 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads