Как вы встраиваете contentEditable в Firefox?

У меня есть следующее:

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

В webkit я могу легко создать это с помощью css. Firefox игнорирует css и делает contenteditable div белым и изменяемым по размеру.

Как я могу изменить css для contentEditable в Firefox. Я хочу, чтобы фон был прозрачным, чтобы отключить изменение размера и панель управления размером.

Спасибо

Ответ 1

Вы можете сопоставить div с этим кодом

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

Ответ 2

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

Ответ simone был в основном правильным, кроме , в кавычках "true" должны быть кавычки "[contenteditable =" true "]

Ответ 3

Оказывается, если вы используете позицию: абсолютный FF автоматически добавляет resizers и обработчик захвата и устанавливает фон в белый. Вы не можете переопределить эти seetings, ну только resizers. Другой -1 для FF.

Ответ 4

div[contenteditable] {
   background: white;
}

Ответ 5

При переопределении стилей для панели contentEditable, селектор css, я обнаружил, что firefox добавлял css-selectable "focus-ring" к моему корню contentEditable node

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

Попробуйте варианты:

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

Вам могут потребоваться вышеупомянутые стили:

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

Но вам может понадобиться найти firebug для параметра -moz определенного размера для отключения.

Для кросс-браузерных таблиц стилей просто перейдите к этому 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>

Ответ 6

Прозрачный фон gif или png должен делать трюк