如何使可編輯 DIV 看起來像文字欄位？-css教學-PHP中文網

如何使可編輯 DIV 看起來像文字欄位？

Susan Sarandon

發布： 2024-11-30 17:52:12

原創

162 人瀏覽過

How Can I Make Editable DIVs Look Like Text Fields?

利用文字欄位建立可編輯 DIV

設計可編輯使用者介面時，視覺上提示使用者互動元素至關重要。啟用了 contentEditable 的 DIV 提供可編輯功能，但其外觀可能並不直觀。幸運的是，CSS 技術可以轉換 DIV 以模仿文字欄位的美觀。

一種方法是利用瀏覽器特定的外觀。對於 Safari、Chrome 和 Firefox：

#textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
}

#input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
}

登入後複製

此 CSS 分別模擬文字區域和文字輸入欄位。

如果您喜歡跨瀏覽器相容性，以下樣式可以實現類似的效果結果：

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

#input {
    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;
}

登入後複製

透過這些調整，您的可編輯DIV 將呈現出熟悉的文本字段外觀，使其功能更加豐富用戶友好。

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