編集可能なDIVをテキストフィールドのようにするにはどうすればよいですか？

ユーザーが編集できるように持っているDIVものがcontentEditable=trueあります。問題は、テキストフィールドのように見えないため、編集できるかどうかがユーザーに明確でない可能性があることです。

DIVテキスト入力フィールドのようにユーザーに表示されるようにスタイルを設定する方法はありますか？

これらは、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>

出力：

ブートストラップを使用する場合は、form-controlクラスを追加するだけです。例えば：

class="form-control" 

WebKitでは、次のことができます。 -webkit-appearance: textarea;

あなたは内側の箱の影に行くことができます：

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

Jarishからjsfiddleを更新しました：http：//jsfiddle.net/ZevvE/2/

Jarishの例から拡張した、Chromeのスタイルに一致させるためにこれを提案します。以前の回答で省略されているcursorプロパティに注意してください。

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;

同様のサイズのTEXTAREAをDIVの下に配置できるため、標準のコントロールのフレームがdivの周囲に表示されます。

誤ってフォーカスを盗むのを防ぐために、無効に設定することをお勧めします。

これらすべての問題は、テキストの行が長く、divオーバーフローよりもはるかに広い場合に対処しないことです。autoは正しく機能するスクロールバーを広告しません。これが私が見つけた完璧な解決策です：

2つの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>