How can I make the box for contenteditable text disappear?

Question

I am using contenteditable on my web pages. This works fine but the browser puts an ugly border around the editable section when it is activated. Also, some of these borders are not erased when the focus is changed to another element on the page.

Safari creates a light blue border, Firefox uses a thin black line, so there is some browser interpretation at work here.

I have tried explicitly setting the border on the editable sections to none and making that CSS property important, but this does not change the browser's behavior.

My question:

Is there a way to influence the styling of the page element that overrules the border property when the user has clicked inside it to start editing?

Answer 1

Add this style (JsFiddle):

[contenteditable="true"]:active, [contenteditable="true"]:focus
{
   border:none;
   outline:none;
}

To let all contenteditable elements not use border and outline when focuesed.

EDIT: I found an excellent tutorial