您如何在 Firefox 中设置 contentEditable 样式？答案

【问题标题】：How do you style contentEditable in Firefox?您如何在 Firefox 中设置 contentEditable 样式？
【发布时间】：2011-12-15 23:46:25
【问题描述】：

我有以下几点：

<div contenteditable="true">Item 2</div>

在 webkit 中，我可以轻松地使用 css 设置样式。 Firefox 忽略了 css，并将 contenteditable div 设置为白色和可调整大小。

如何在 Firefox 中修改 contentEditable 的 css。我希望背景是透明的并禁用调整大小和调整大小的手柄栏。

谢谢

【问题讨论】：

标签： css html firefox contenteditable

【解决方案1】：

你可以用这个代码匹配div

div[contenteditable=true] {
   background: rgba(0,0,0,0); /* transparent bg */
   resize:none; /* disable resizing */
}

【讨论】：

在 Firefox 7 中我可以随意设置样式，但我不知道如何删除错误单词上的红色下划线。
属性选择器是在 CSS2 中定义的，所以它应该可以工作。你有什么版本的 Firefox？
还是没有运气，我什至试过： div[contenteditable=true]:focus --- 因为它只有在我点击时才会出现
当我点击进去时，我在 div 上看到了 _moz_resizing="true"。那就是问题所在。我该如何摆脱它？

【解决方案2】：

div[contenteditable="true"] {
    /* your style here */
}

simone 的回答大部分是正确的，除了 需要在 [contenteditable="true"] 中的 "true" 周围加上引号

【讨论】：

【解决方案3】：

事实证明，如果您使用 position:absolute FF 自动添加调整大小和抓取处理程序并将背景设置为白色。您不能覆盖这些设置，只能调整大小。 FF 的另一个 -1。

【讨论】：

FF 的大 -1，所以......到目前为止有什么解决方案吗？我用 jQuery 试过了：$('#target').removeAttr('_moz_abspos').removeAttr('_moz_resizing') 但是#target 是不可编辑的。

【解决方案4】：

div[contenteditable] {
   background: white;
}

【讨论】：

【解决方案5】：

当覆盖 contentEditable 面板的样式时，我发现 css 选择器正在向我的根 contentEditable 节点添加一个 css 可选择的“焦点环”

:-moz-focusring:not(input):not(button):not(select):not(textarea):not(iframe):not(frame):not(body):not(html) { outline: 1px dotted;}

尝试以下变体：

-moz-focusring or -moz-focusring[contentEditable='true']

您可能需要上述样式：

background: rgba(0,0,0,0); 
resize:none;

但是，您可能需要通过萤火虫查找 -moz 特定的调整大小参数来禁用。

对于跨浏览器样式表测试，只需浏览到这个测试数据 url：

data:text/html,<div style='position:absolute;left:100;top:50;width:200;height:300;background-color:rgb(50,50,80)'><div contenteditable>Test<br/>Test </div></div> <style contenteditable>head, title, style {display: block;} :-moz-focusring{background: transparent}</style>

【讨论】：

【解决方案6】：

透明背景 gif 或 png 应该可以解决问题

【讨论】：