How do you style contentEditable in Firefox?

Question

I have the following:

Item 2

In webkit I can easily style this with css. Firefox is ignorin

Answer 1

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,
Test
Test