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:
Please Login to comment...