如何將 DIV 樣式設定為看起來像文字欄位？

如何設定 DIV 樣式以模仿文字欄位外觀

如果您有啟用了 contentEditable 的 DIV 元素，使用者可以編輯其內容。但是，其預設樣式可能無法傳達其可編輯性質。本文探討了一種使 DIV 顯示為文字輸入欄位的解決方案。

CSS 和 HTML 樣式

提供的 CSS 和 HTML 範例示範如何設定 DIV 樣式類似於文字區域和輸入欄位。 CSS 包含供應商前綴樣式以支援不同的瀏覽器。

輸出

產生的輸出將建立一個與 Safari、Chrome 和 Safari 中的實際文字欄位在視覺上無法區分的可編輯 DIV。火狐。它在 Opera 和 IE9 中也能正常顯示。

演示和範例程式碼

有關工作演示，請訪問提供的 jsfiddle URL：

下面提供了 CSS 和 HTML程式碼範例，供您參考參考：

CSS:

HTML:

HTML:

將這些樣式技術合併到您自己的程式碼中創建視覺上吸引人且直觀的可編輯DIV 元素。

以上是如何將 DIV 樣式設定為看起來像文字欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！