Come si progetta il contentEditabile in Firefox?

Question

Ho il seguente:

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

in WebKit mi può facilmente stile di questo con i CSS. Firefox sta ignorando il css e rende il div contentedable bianco e ridimensionabile.

Come posso modificare il css per contentEditable in Firefox. Voglio che lo sfondo sia trasparente e per disabilitare il ridimensionamento e la barra degli strumenti di ridimensionamento.

Grazie

Answer 1

È possibile abbinare il div con questo codice

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

Answer 2

div[contenteditable] { 
    background: white; 
} 

Answer 3

scopre che se si utilizza position: absolute FF auto aggiunge resizers e un gestore di afferrare e imposta lo sfondo bianco . Non puoi scavalcare questi ribelli, bensì solo resizer. Un altro -1 per FF.

Answer 4

Quando l'override stili per un pannello contentEditable, il selettore css ho scoperto che Firefox è stato l'aggiunta di un css selezionabili "Focus-ring" alla mia radice nodo contentEditable

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

varianti Try di:

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

Si consiglia gli stili di cui sopra:

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

Tuttavia, potrebbe essere necessario firebug cercare il parametro di ridimensionamento -moz specifico da disabilitare.

Per le prove di fogli di stile cross-browser, basta sfogliare a questo URL dati di test:

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 5

Uno sfondo gif o png trasparenti dovrebbe fare il trucco

Answer 6

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

risposta di Simone era per lo più corretta, tranne ci devono essere virgolette "vero" in [contenteditable = "true"]