Tengo el siguiente:¿Cómo estilo contentEditable en Firefox?
<div contenteditable="true">Item 2</div>
En WebKit que puede estilo fácilmente esto con CSS. Firefox está ignorando el CSS, y haciendo que el div contenteditable sea blanco y redimensionable.
¿Cómo puedo modificar el css para contentEditable en Firefox. Quiero que el fondo sea transparente e inhabilitar el cambio de tamaño, y la barra del control de cambio de tamaño.
Gracias
Se puede sincronizar el div con el código
div[contenteditable=true] {
background: rgba(0,0,0,0); /* transparent bg */
resize:none; /* disable resizing */
}
div[contenteditable] {
background: white;
}
Resulta que si se utiliza la posición: FF absoluta de auto añade resizers y un controlador de agarrar y fija el fondo a blanco . No puede anular estos episodios, bueno solo los resizer. Otro -1 para FF.
grande -1 para FF, entonces ... ¿alguna solución hasta ahora? Lo he intentado con jQuery: '$ ('# target'). RemoveAttr ('_ moz_abspos'). RemoveAttr ('_ moz_resizing')' Pero luego '# target' no es editable. – enloz
Al reemplazar estilos para un panel contentEditable, el selector CSS encontré que Firefox fue la adición de un css seleccionables
:-moz-focusring:not(input):not(button):not(select):not(textarea):not(iframe):not(frame):not(body):not(html) { outline: 1px dotted;}
variantes "Focus-ring" a mi nodo raíz contentEditable Trate de:
-moz-focusring or -moz-focusring[contentEditable='true']
Es posible que desee los estilos antes mencionados:
background: rgba(0,0,0,0);
resize:none;
Pero, es posible que deba buscar Firebug el parámetro de cambio de tamaño específico de -moz para deshabilitarlo.
Para las pruebas de hojas de estilo cross-browser, simplemente navegar a esta url datos de prueba:
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>
un gif fondo transparente o png debe hacer el truco
div[contenteditable="true"] {
/* your style here */
}
respuesta de Simone era sobre todo correcta, excepto debe haber citas alrededor de "verdadero" en [contenteditable = "true"]
Eso funciona en webkit no en firefox? – AnApprentice
en firefox 7 puedo hacer el estilo que yo quiera, pero no sé cómo eliminar el subrayado rojo en palabras incorrectas. – neworld
Los selectores de atributos están definidos en CSS2, por lo que debería funcionar. ¿Qué versión de Firefox tienes? – Simone