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

我有一个

DIV

，它具有

contentEditable=true

，因此用户可以编辑它。问题是它看起来不像一个文本字段，因此用户可能不清楚它是否可以编辑

---

是否有一种方法可以设置

DIV的样式，以便用户将其显示为文本输入字段？
您可以在DIV下放置一个大小类似的文本区域，以便在DIV周围可以看到标准控件的框架

最好将其设置为禁用，以防止意外窃取焦点。
在WebKit中，您可以执行以下操作：
-WebKit外观：textarea
您可以选择内框阴影：

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

我从Jarish更新了JSFIDLE:
这些看起来与Safari、Chrome和Firefox中的真正对应项相同。它们优雅地退化，在Opera和IE9中看起来也不错

演示：

CSS:

textarea{
高度：28px；
宽度：400px；
}
#文本区{
-moz外观：textfield多行；
-webkit外观：textarea；
边框：1px纯色灰色；
字体：中-moz固定；
字体：-webkit小控件；
高度：28px；
溢出：自动；
填充：2px；
调整大小：两者；
宽度：400px；
}
输入{
边缘顶部：5px；
宽度：400px；
}
#输入{
-moz外观：textfield；
-webkit外观：textfield；
背景色：白色；
背景色：-moz字段；
边框：1px实心暗光；
盒影：1px 1px 1px 0浅灰色镶嵌；
字体：-moz字段；
字体：-webkit小控件；
边缘顶部：5px；
填充物：2个3个；
宽度：398px；
}

HTML:

我是一个文本区
我看起来像一个普通人
我看起来像一个输入

输出：

我建议将其与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;

所有这些的问题是，如果文本行长且比div overflow宽得多，它们就无法解决问题：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>


现在，像这样的长文本可以放在文本区域中，它将真正

看起来和行为更像真实的文本区域bla bla bla

如果使用引导，只需添加
表单控件
类即可。例如：

class="form-control" 

背景：白色；边框：1px实心#666；光标：文本；？：P看，我想让它看起来像一个
textarea
@mkk-如果您添加一些示例文本，可能会有所帮助：@Jared:）干得好！；-）现在很难将其与div混淆。。哦，这是一个div，我忘了：）@mkk-我个人认为我的演示更清晰，但嘿，它是什么。是的，不确定这是OP在答案中寻找的。如果你想让文本字段与div的内容自动缩放，这会越来越难。嗯，这太方便了。webkit小型控件和中型moz fixed到底做什么？在FirefoxV13中，它们似乎使字体看起来是等距的。0@Hengjie这些是浏览器在显示输入字段时使用的默认样式。下面是一个用例，请尝试复制粘贴其中的html内容。你会看到区别。还应该添加-背景：白色；如果我想在这个div中添加另一个div，而我不希望它是可编辑的呢？这是一个很好的答案，我觉得是最干净的。我的投票结果是这是正确的答案。有没有办法让用户扩大这个区域？正常的文本区域可以做到这一点。