css3 - How can I make the box for contenteditable text disappear? -

i using contenteditable on web pages. works fine browser puts ugly border around editable section when activated. also, of these borders not erased when focus changed element on page.

safari creates light blue border, firefox uses thin black line, there browser interpretation @ work here.

i have tried explicitly setting border on editable sections none , making css property important, not change browser's behavior.

my question:

is there way influence styling of page element overrules border property when user has clicked inside start editing?

add style (jsfiddle):

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

to let contenteditable elements not use border , outline when focuesed.

edit: found excellent tutorial