Wie kann ein bearbeitbarer DIV wie ein Textfeld aussehen?

Ich habe eine, DIVdie hat, contentEditable=truedamit der Benutzer sie bearbeiten kann. Das Problem ist, dass es nicht wie ein Textfeld aussieht, sodass dem Benutzer möglicherweise nicht klar ist, dass es bearbeitet werden kann.

Gibt es eine Möglichkeit, das DIVso zu gestalten, dass es dem Benutzer wie ein Texteingabefeld erscheint?

Diese sehen genauso aus wie ihre echten Gegenstücke in Safari, Chrome und Firefox. Sie werden elegant abgebaut und sehen auch in Opera und IE9 in Ordnung aus.

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>

Ausgabe:

Wenn Sie Bootstrap verwenden, fügen Sie einfach form-controlKlasse hinzu. Beispielsweise:

class="form-control" 

In WebKit können Sie Folgendes tun: -webkit-appearance: textarea;

Sie könnten sich für einen inneren Kastenschatten entscheiden:

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

Ich habe die jsfiddle von Jarish aktualisiert: http://jsfiddle.net/ZevvE/2/

Ich würde dies vorschlagen, um dem Stil von Chrome zu entsprechen, der sich aus Jarishs Beispiel ergibt. Beachten Sie die Cursoreigenschaft, die in früheren Antworten weggelassen wurde.

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;

Sie können eine TEXTAREA ähnlicher Größe unter Ihrem DIV platzieren, sodass der Rahmen des Standardsteuerelements um div sichtbar ist.

Es ist wahrscheinlich gut, die Einstellung zu deaktivieren, um ein versehentliches Stehlen des Fokus zu verhindern.

Das Problem bei all diesen ist, dass sie nicht ansprechen, wenn die Textzeilen lang und viel breiter sind als der div-Überlauf: auto fügt keine Bildlaufleiste hinzu, die richtig funktioniert. Hier ist die perfekte Lösung, die ich gefunden habe:

Erstellen Sie zwei Divs. Ein innerer Teil, der breit genug ist, um die breiteste Textzeile zu verarbeiten, und ein kleinerer äußerer, der als Halter für den inneren Teil fungiert:

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