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

Question

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

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

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

如果您使用bootstrap，只需添加form-control类。例如：

class="form-control" 

Answer 3

在WebKit中，您可以执行：-webkit-appearance: textarea;

Answer 4

你可以选择一个内盒阴影：

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

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

Answer 5

我建议将其用于匹配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溢出，则它们不会解决：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>