如何使可编辑的DIV看起来像文本字段？

Question

我有一个DIV，contentEditable=true因此用户可以对其进行编辑。问题在于它看起来不像文本字段，因此用户可能不清楚它是否可以编辑。

有没有一种方法可以设置样式DIV，使其在用户看来像文本输入字段？

Answer 1

我建议这样做是为了配合Chrome的样式（从Jarish的示例扩展而来）。请注意游标属性，先前的答案已被省略。cursor: text;border: 1px solid #ccc;font: medium -moz-fixed;font: -webkit-small-control;height: 200px;overflow: auto;padding: 2px;resize: both;-moz-box-shadow: inset 0px 1px 2px #ccc;-webkit-box-shadow: inset 0px 1px 2px #ccc;box-shadow: inset 0px 1px 2px #ccc;

Answer 2

所有这些的问题是，如果文本行太长且比div溢出要宽得多，它们将无法解决：auto不会显示滚动条正常工作。这是我找到的完美解决方案：创建两个div。一个内部div，其宽度足以处理最宽的文本行，然后是一个较小的外部div，它作用于内部div的保持器：<div style="border:2px inset #AAA;cursor:text;height:120px;overflow:auto;width:500px;">&nbsp; &nbsp; <div style="width:800px;">&nbsp; &nbsp; &nbsp;now really long text like this can be put in the text area and it will really <br/>&nbsp; &nbsp; &nbsp;look and act more like a real text area bla bla bla <br/>&nbsp; &nbsp; </div></div>