如何在编辑时删除可编辑元素周围的蓝框？

Question

我们可以使用contentEditable="true"属性编辑HTML元素：

<div contentEditable="true">
    This text can be edited by the user.
</div>

JS Fiddle

当用户编辑内容时，如何使元素周围的蓝框消失？

我尝试使用:active和:hover伪类（以及border: none）无济于事。

Answer 1

这不是边框，而是您在焦点上看到的outline。你可以试试这个：

div[contentEditable] {
    outline: none;
}

演示：http://jsfiddle.net/bxmr6gzg/1/