如何使可编辑 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中文网其他相关文章！