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