如何在Firefox中设置contentEditable的样式？

Question

我有以下代码：

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

在 Webkit 中，我可以轻松使用 CSS 样式。Firefox 忽略 CSS，并使 contenteditable div 白色和可调整大小。

如何修改 Firefox 中 contentEditable 的 CSS 样式。我希望背景是透明的，并禁用调整大小和大小调整把手。

谢谢

- AnApprentice

Answer 1

你可以使用这段代码匹配 div 元素。

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

- Simone

---

在Firefox 7中，我可以按照自己的喜好进行样式设置，但我不知道如何去除错误单词上的红色下划线。 - neworld

属性选择器在CSS2中定义，所以应该可以工作。你使用的是哪个版本的Firefox？ - Simone

仍然没有成功，我甚至尝试了：div[contenteditable=true]:focus --- 因为它只会在我点击时发生。 - AnApprentice

当我点击时，我在div上看到_moz_resizing =“true”。这就是问题所在。我该如何摆脱它？ - AnApprentice

Answer 2

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

Simone的回答基本正确，但是在[contenteditable="true"]周围需要加上引号"true"

- harveyxia

Answer 3

原来，如果使用position:absolute，FF会自动添加调整大小的控件和拖动处理程序，并将背景设置为白色。你无法覆盖这些设置，只能修改调整大小的控件。这是Firefox的又一点不足之处。

- AnApprentice

---

针对 FF 的大问题，目前有解决方案吗？我已经尝试了使用 jQuery 但是 $('#target') 将不可编辑。解决方法如下：$('#target').removeAttr('_moz_abspos').removeAttr('_moz_resizing') - enloz

Answer 4

div[contenteditable] {
   background: white;
}

- chovy

Answer 5

当覆盖contentEditable面板的样式时，我发现Firefox会向我的根contentEditable节点添加一个可选择的CSS“focus-ring”。

:-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;

但是，您可能需要使用Firebug查找-moz特定的resize参数以进行禁用。

对于跨浏览器样式表测试，只需浏览到此测试数据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>

- Ajax

Answer 6

一个透明背景的gif或png应该就可以解决问题了

- Ralph Vaz