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

我有一个有contentEditable=true的DIV ，所以用户可以编辑它。 问题是它看起来不像文本字段，所以用户可能不清楚它可以被编辑。

有没有一种方法可以让DIV样式看起来像文本input字段一样？

Answer 1

这些看起来与Safari，Chrome和Firefox中的真实对象相同。 它们在Opera和IE9中优雅地降级并且可以看。

演示： http : //jsfiddle.net/ThinkingStiff/AbKTQ/

CSS：

 textarea { height: 28px; width: 400px; } #textarea { -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 { margin-top: 5px; width: 400px; } #input { -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 id="textarea" contenteditable>I look like textarea</div> <input value="I am an input" /> <div id="input" contenteditable>I look like an input</div> 

输出：

Answer 2

在WebKit中，你可以这样做： -webkit-appearance: textarea;

Answer 3

如果你使用引导只是添加form-control类。 例如：

 class="form-control" 

Answer 4

你可以去一个内部盒子的阴影：

 div[contenteditable=true] { box-shadow: inset 0px 1px 4px #666; } 

我从Jarish更新了jsfiddle： http : //jsfiddle.net/ZevvE/2/

Answer 5

我会build议这个匹配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 6

你可以在你的DIV下放置一个类似大小的TEXTAREA，这样标准控件的框架就可以在div上看到。

将其设置为禁用可能是好事，以防意外的集中窃取。

Answer 7

所有这些问题是他们没有解决，如果文本的行长，宽得多的div溢出：自动不会广告一个滚动条，正常工作。 这是我find的完美解决scheme：

创build两个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>