How do you style contentEditable in Firefox? - css

Question

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

Answer 1

You can match the div with this code
div[contenteditable=true] {
background: rgba(0,0,0,0); /* transparent bg */
resize:none; /* disable resizing */
}

Answer 2

div[contenteditable="true"] {
/* your style here */
}
simone's answer was mostly correct except there needs to be quotes around "true" in [contenteditable="true"]

Answer 3

Turns out that if you use position:absolute FF auto adds resizers and a grab handler and sets the background to white. You can't override these seetings, well only resizers. Another -1 for FF.

Answer 4

div[contenteditable] {
background: white;
}

Answer 5

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>

Answer 6

A transparent background gif or png should do the trick