Question

我有以下内容：

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

在webkit中，我可以使用css轻松设置这个样式。 Firefox忽略了css，使得contenteditable div变白并且可以调整大小。

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

由于

Answer 1

您可以将div与此代码匹配

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

Answer 2

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

simone的回答大多是正确的，除了在[contenteditable =“true”]中需要引用“true”之外的语句

Answer 3

原来，如果你使用position：absolute FF auto添加resizer和一个抓取处理程序并将背景设置为白色。你不能覆盖这些seetings，只能覆盖resizer。 FF的另一个-1。

Answer 4

div[contenteditable] {
   background: white;
}

Answer 5

当覆盖contentEditable面板的样式时，css选择器我发现firefox正在向我的root 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;

但是，您可能需要查询-moz特定的resize参数以禁用。

对于跨浏览器样式表测试，只需浏览此测试数据网址：

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>

Answer 6

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

你如何在Firefox中设置contentEditable风格？

6 个答案: