如何让满足可疑文本的框消失？

Question

我在网页上使用了contenteditable。这工作正常，但浏览器在可编辑部分激活时会在其周围放置一个丑陋的边框。此外，当焦点更改为页面上的其他元素时，其中一些边框不会被删除。

Safari创建一个浅蓝色边框，Firefox使用一条细黑线，因此这里有一些浏览器解释。

我尝试将可编辑部分的边框明确设置为none，并使CSS属性变得重要，但这不会改变浏览器的行为。

我的问题：

有没有办法影响页面元素的样式，当用户在其中单击以开始编辑时，它会否决border属性？

Answer 1

添加此样式（JsFiddle）：

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

让所有 contenteditable 元素在focuesed时不使用border和outline。

编辑：我发现了一个很棒的tutorial

Answer 2

尝试在css中添加outline：none表单元素，以删除css中的边框高亮属性outline：none for input elements。

例如：

    input:focus{
      outline:none;
    }

    textarea:focus{
      outline:none;
    }

    select:focus{
      outline:none;
    }

对于工作代码，请找到Jsfiddle link

Answer 3

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