Menu
When I set a pre element to contenteditable and put focus in it for editing, it receives a dotted border around it that doesn't look very nice. The border isn't there when focus is somewhere else.
How do I remove that border?
Thanks
366
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.
Adjusting the Margin Size of an HTML Element With CSS You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left , margin-right , margin-top , and margin-bottom .
We can specify the no border property using CSS border: none, border-width : 0, border : 0 properties. Approach 1: We will give border-color, border-style properties to both headings, for showing text with border and no-border. For no border heading, we will use the border-width : 0 which will result in no border.
We can set the border property to none to remove the border from an HTML table. The property is short-hand of different border properties. Those different properties are border-width , border-style and border-color . A border won't be formed when we use the border property and set it to none.
Set the outline property to 0px solid transparent;. You might have to set it on the :focus state as well, for example:
[contenteditable]:focus { outline: 0px solid transparent; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
