Làm cách nào để biến DIV có thể chỉnh sửa trông giống như một trường văn bản?

Tôi có một DIVcái có contentEditable=trueđể người dùng có thể chỉnh sửa nó. Vấn đề là nó không giống một trường văn bản, vì vậy người dùng có thể không rõ ràng rằng nó có thể được chỉnh sửa.

Có cách nào để tôi có thể tạo kiểu DIVđể nó xuất hiện với người dùng giống như trường nhập văn bản không?

Chúng trông giống như các đối tác thực của chúng trong Safari, Chrome và Firefox. Chúng xuống cấp một cách duyên dáng và trông cũng ổn trong Opera và IE9.

Demo: 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>

Đầu ra:

Nếu bạn sử dụng bootstrap chỉ cần thêm form-controllớp. Ví dụ:

class="form-control" 

Trong WebKit, bạn có thể làm: -webkit-appearance: textarea;

Bạn có thể đi cho một bóng hộp bên trong:

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

Tôi đã cập nhật jsfiddle từ Jarish: http://jsfiddle.net/ZevvE/2/

Tôi sẽ đề xuất điều này để phù hợp với phong cách của Chrome, mở rộng từ ví dụ của Jarish. Lưu ý thuộc tính con trỏ mà các câu trả lời trước đó đã bỏ qua.

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;

Bạn có thể đặt một TEXTAREA có kích thước tương tự bên dưới DIV của mình, để khung của điều khiển tiêu chuẩn sẽ hiển thị xung quanh div.

Có thể tốt nếu bạn đặt nó ở chế độ vô hiệu hóa để ngăn chặn việc vô tình lấy cắp tiêu điểm.

Vấn đề với tất cả những thứ này là chúng không giải quyết được nếu các dòng văn bản dài và rộng hơn nhiều khiến tràn div: auto không quảng cáo thanh cuộn hoạt động đúng. Đây là giải pháp hoàn hảo mà tôi tìm thấy:

Tạo hai div. Một div bên trong đủ rộng để xử lý dòng văn bản rộng nhất và sau đó là một div bên ngoài nhỏ hơn đóng vai trò giữ cho div bên trong:

<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>