如何去除HTML contenteditable文本下方的红色虚线？

我太懂这种烦人的情况了——给<p>标签加上contenteditable属性后，编辑或者点击文本时底部总会冒出来一条红色虚线，哪怕你已经给:focus状态设了outline: none和border: none也不管用。这其实是不同浏览器给可编辑元素默认加上的焦点样式，咱们用针对性的CSS就能彻底把它干掉：

/* 先给可编辑p标签重置基础样式 */
p[contenteditable] {
  border: none;
  outline: none;
}

/* 聚焦状态下彻底清除所有焦点相关样式 */
p[contenteditable]:focus {
  outline: none;
  border: none;
  box-shadow: none;
  /* 处理Chrome、Safari等WebKit内核浏览器的特殊焦点环 */
  -webkit-focus-ring-color: transparent;
  /* 移除移动端点击时的高亮 */
  -webkit-tap-highlight-color: transparent;
}

/* 专门处理Firefox的内置焦点伪元素 */
p[contenteditable]::-moz-focus-inner {
  border: 0 !important;
}

/* 可选：如果虚线是文本选中时出现的，也可以清除选中样式 */
p[contenteditable]::selection {
  background-color: transparent;
}

为什么之前的设置没用？ #

不同浏览器对contenteditable元素的焦点样式实现逻辑不一样：

• Chrome、Safari这类WebKit内核浏览器会用-webkit-focus-ring-color来控制焦点环颜色
• Firefox则是通过::-moz-focus-inner这个伪元素来渲染焦点边框
• 有些浏览器还会用box-shadow替代outline做焦点样式

所以只设置outline和border是不够的，得把这些浏览器专属的样式也一起覆盖掉。如果还是有顽固的虚线，可以给样式加上!important强制覆盖浏览器的默认优先级（尽量少用，但特殊情况能快速解决问题）。

内容的提问来源于stack exchange，提问作者user1976940