[解決済み] 編集可能な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>

出力します。