How do I remove the border around a focused conten

问题:

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

回答1:

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;
}

回答2:

You can also add the :read-write pseudo-class to style elements that are editable.

For instance (jsFiddle):

.element:read-write:focus {
     outline: none;
}

Read more here on codrops.

The :read-write pseudo-class selector is supported in Chrome, Safari, and Opera 14+, and on iOS. It is supported with the -moz- prefix in Firefox in the form :-moz-read-write. The :read-write selector is not supported in Internet Explorer and on Android.