Как вы разрабатываете contentEditable в Firefox?

Question

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

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

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

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

Спасибо

Answer 1

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

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

Answer 2

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

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

Answer 3

Оказывается, что если вы используете position: absolute FF, то автоматически добавляет изменяемые размеры и обработчик захвата и устанавливает фон в белый цвет Вы не можете переопределить эти настройки, хорошо только изменение размера. Еще -1 для ФФ.

Answer 4

Прозрачный фон GIF или PNG должны сделать трюк

Answer 5

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

:-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;

Но вам может потребоваться отключить поиск с помощью параметра -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>

Answer 6

div[contenteditable] {
   background: white;
}