Fatal编程技术网
  • javascript/
  • Javascript 如何删除焦点内容周围的边框？

Javascript 如何删除焦点内容周围的边框？

javascript jquery

Javascript 如何删除焦点内容周围的边框？,javascript,jquery,contenteditable,Javascript,Jquery,Contenteditable,当我将一个pre元素设置为contenteditable并将焦点放在其中进行编辑时，它会收到一个围绕它的虚线边框，看起来不太好看。当焦点在其他地方时，边界不存在。 如何删除该边界 谢谢将设置为0px固体透明。您可能还必须将其设置为：focus状态，例如： [contenteditable]:focus { outline: 0px solid transparent; } 还可以将：read-write伪类添加到可编辑的样式元素中 例如（）： 阅读更多 Chrome、Safari和Op

当我将一个pre元素设置为contenteditable并将焦点放在其中进行编辑时，它会收到一个围绕它的虚线边框，看起来不太好看。当焦点在其他地方时，边界不存在。
如何删除该边界

谢谢

将设置为
0px固体透明。您可能还必须将其设置为
：focus
状态，例如：


[contenteditable]:focus {
    outline: 0px solid transparent;
}



还可以将
：read-write
伪类添加到可编辑的样式元素中

例如（）：

阅读更多

Chrome、Safari和Opera 14+以及iOS都支持读写伪类选择器。
Firefox中的
-moz-
前缀支持它，格式为
：-moz read-write
。
Internet Explorer和Android不支持
：读写
选择器


@Christoff:
大纲
在IE7或更低版本中不起作用。在这些浏览器中，需要将元素的
hideFocus
属性设置为
true
，即
$（“#myEl”）.get（）.hideFocus=true供参考：
[contenteditable]：焦点{outline:0px solid transparent；}
谢谢大家。拯救了这一天。仅供参考，我只在Chrome上看到了轮廓。Firefox和IE11没有显示它。你也可以简单地使用
大纲：无
Alf，你的评论应该标记为答案：>这和
有什么区别。元素：focus
？它只适用于内容可编辑的选择器。使用它比
[内容可编辑]：focus
有什么好处吗？另外：启用了伪选择器

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