How do you style contentEditable in Firefox?

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

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 4

div[contenteditable] {
   background: white;
}

Answer 5

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 6

A transparent background gif or png should do the trick