我怎样才能让contenteditable文字框消失？

Question

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

Safari创建淡蓝色边框，Firefox使用细黑线，所以在这里有一些浏览器解释工作。

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

我的问题：

有没有办法来影响否决border属性，当用户点击它里面开始编辑页面元素的造型？

Answer 1

尝试添加大纲：在CSS中没有为表单元素删除边框高亮属性大纲：没有在CSS中的输入元素。

例如：

input:focus{ 
     outline:none; 
    } 

    textarea:focus{ 
     outline:none; 
    } 

    select:focus{ 
     outline:none; 
    } 

对于工作代码找到Jsfiddle link

Answer 2

添加这种风格（JsFiddle）：

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

让所有CONTENTEDITABLE元素不使用边框和轮廓当focuesed时。

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

Answer 3

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