你如何在Firefox中調整contentEditable風格？

我有以下幾點：你如何在Firefox中調整contentEditable風格？

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

WebKit中我可以輕鬆地與CSS樣式這一點。火狐瀏覽器忽略了這個CSS，並且讓這個可信的div變白並且可以調整大小。

如何在Firefox中修改contentEditable的css。我希望背景透明並禁用調整大小，並調整大小的手柄欄。

感謝

來源

2011-10-26 AnApprentice

您可以使用此代碼匹配的div

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

來源

2011-10-26 19:19:20 Simone

這適用於webkit而非firefox嗎？ – AnApprentice

在firefox 7我可以風格，因爲我想但我不知道如何刪除錯誤的單詞上的紅色下劃線。 – neworld

屬性選擇器在CSS2中定義，因此它應該可以工作。你有什麼版本的Firefox？ – Simone

div[contenteditable] { 
    background: white; 
}

來源

2011-10-26 19:58:24 chovy

事實證明，如果你使用的位置是：絕對FF汽車增加了大小調整和搶處理器和背景設置爲白色。你不能覆蓋這些選擇，只有resizers。另一個爲FF。

來源

2011-10-27 00:40:23 AnApprentice

FF的大-1，所以......迄今爲止的解決方案？我嘗試過使用jQuery：'$（'＃target'）。removeAttr（'_ moz_abspos'）。removeAttr（'_ moz_resizing'）'但是'＃target'不可編輯。 – enloz

當重寫樣式一個CONTENTEDITABLE面板，所述CSS選擇我發現，火狐被加入的一個css可選擇「環聚焦」到我的根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特定的resize參數以禁用。

跨瀏覽器的樣式表的測試，只是瀏覽這個測試數據網址：

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>

來源

2012-03-19 15:05:20 Ajax

透明背景的gif或png應該做的伎倆

來源

2012-07-17 05:02:23

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

Simone的回答大多是正確的，除了需要在[contenteditable =「true」]的「true」附近引用引號。

來源

2014-05-15 21:35:10 harveyxia

你如何在Firefox中調整contentEditable風格？

回答

相關問題