如何将 DIV 样式设置为看起来像文本字段？

如何设置 DIV 样式以模仿文本字段外观

如果您有启用了 contentEditable 的 DIV 元素，用户可以编辑其内容。但是，其默认样式可能无法传达其可编辑性质。本文探讨了一种使 DIV 显示为文本输入字段的解决方案。

CSS 和 HTML 样式

提供的 CSS 和 HTML 示例演示了如何设置 DIV 样式类似于文本区域和输入字段。 CSS 包含供应商前缀样式以支持不同的浏览器。

输出

生成的输出将创建一个与 Safari、Chrome 和 Safari 中的实际文本字段在视觉上无法区分的可编辑 DIV。火狐。它在 Opera 和 IE9 中也能正常显示。

演示和示例代码

有关工作演示，请访问提供的 jsfiddle URL：

http://jsfiddle.net/ThinkingStiff/AbKTQ/

下面提供了 CSS 和 HTML 代码示例，供您参考参考：

CSS:

textarea {
    /* shared properties */
    height: 28px;
    width: 400px;
}

#textarea {
    /* textarea-specific properties */
    -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;
}

input {
    /* shared properties */
    margin-top: 5px;
    width: 400px;
}

#input {
    /* input-specific properties */
    -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;    
}

HTML:

<textarea>I am a textarea</textarea>
<div><p>将这些样式技术合并到您自己的代码中创建视觉上吸引人且直观的可编辑 DIV 元素。</p></div>

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