如何在 Firefox 中设置 contentEditable 样式？

发布于 2024-12-12 02:57:04 字数 269 浏览 2 评论 0原文

我有以下内容：

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

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

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

谢谢

原文

I have the following:

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

In webkit I can easily style this with css. Firefox is ignoring the css, and making the contenteditable div white and resizable.

How can I modify the css for contentEditable in Firefox. I want the background to be transparent and to disable resizing, and the resizing handle bar.

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

謸气贵蔟 2024-12-19 02:57:04

您可以将 div 与此代码匹配

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

You can match the div with this code

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

回复收藏 0 原文

舞袖。长 2024-12-19 02:57:04

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

西蒙的回答基本上是正确的，除了需要在[contenteditable =“true”]中的“true”周围加引号

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

simone's answer was mostly correct except there needs to be quotes around "true" in [contenteditable="true"]

回复收藏 0 原文

女皇必胜 2024-12-19 02:57:04

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

回复收藏 0 原文

落日海湾 2024-12-19 02:57:04

div[contenteditable] {
   background: white;
}

div[contenteditable] {
   background: white;
}

回复收藏 0 原文

熟人话多 2024-12-19 02:57:04

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

但是，您可能需要 firebug 查找要禁用的 -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>

When overriding styles for a contentEditable panel, the css selector I found that firefox was adding a css-selectable "focus-ring" to my root contentEditable node

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

Try variants of:

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

You may want the aforementioned styles:

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

But, you may need to firebug lookup the -moz specific resize parameter to disable.

For cross-browser stylesheet tests, just browse to this test data 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>

回复收藏 0 原文