How to remove border from an editable element using CSS ?
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
Share your thoughts in the comments
Please Login to comment...