如何使可编辑的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;">

    <div style="width:800px;">

     now really long text like this can be put in the text area and it will really <br/>

     look and act more like a real text area bla bla bla <br/>

    </div>

</div>