如何设置 ContentEditable DIV 的样式使其看起来像文本字段？

将可编辑 DIV 设置为文本字段

使用 contentEditable=true 创建具有可编辑内容的 DIV 时，用户可能不会立即意识到它可以由于其默认外观而可以编辑。这可以通过将 DIV 样式设置为类似于标准文本输入字段来解决。

要实现这种视觉相似性，您可以利用以下 CSS 样式：

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

这些样式提供边框，通过溢出调整高度，并为文本字段设置适当的字体。

此外，您可以在输入 {} 部分中包含自定义样式，以进一步增强文本字段，例如设计：

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

#inputted-div {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    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;    
}

在这里，我们添加了边距以防止输入与其他元素显得太接近，并自定义了背景颜色、边框和阴影以实现一致的外观和感觉。

通过实现这些 CSS 样式，您可以将可编辑的 DIV 转换为具有视觉吸引力的文本字段，让用户清楚地知道他们可以修改其内容。

以上是如何设置 ContentEditable DIV 的样式使其看起来像文本字段？的详细内容。更多信息请关注PHP中文网其他相关文章！