如何設定可編輯 DIV 的樣式使其看起來像文字欄位？

讓可編輯的DIV 類似於文字欄位

通常，可能需要允許使用者使用以下方式編輯網頁的特定部分可編輯的DIV。然而，DIV 元素自然缺乏指示可編輯性的視覺提示，使用戶不確定是否可以與其互動。

為了解決這個問題，可以採用 CSS 樣式將可編輯的 DIV 轉換為類似標準文字輸入欄位。幸運的是，現代瀏覽器提供了模仿本機文字輸入控制項外觀的特定 CSS 屬性。

類似文字欄位的DIV 的CSS 樣式

以下CSS 程式碼可以應用於DIV 以賦予其類似文字欄位的外觀：

#textarea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  height: 28px;
  overflow: auto;
  padding: 2px;
  resize: both;
  width: 400px;
}

此外，可以將特定樣式套用於用於增加真實感的textarea元素：

textarea {
  height: 28px;
  width: 400px;
}

類似文字欄位輸入的 CSS樣式

同樣，可以使用以下方法將輸入樣式設定為類似文字欄位下列的CSS:

#input {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  background-color: white;
  background-color: -moz-field;
  border: 1px solid darkgray;
  box-shadow: 1px 1px 1px 0 lightgray inset;  
  font: -moz-field;
  font: -webkit-small-control;
  margin-top: 5px;
  padding: 2px 3px;
  width: 398px;    
}

input {
  margin-top: 5px;
  width: 400px;
}

輸出

輸出

產生的HTML 和CSS產生以下輸出：

[文字區域和文字區域的圖像輸入，兩者樣式都看起來像文字欄位]此樣式與Safari、Chrome 和Firefox，針對Opera 和IE9 優雅降級。

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