編集可能なdivを作成するテキストフィールド

が多い場合、ユーザーが編集可能なDivを使用してWebページの特定のセクションを編集できるようにすることが望ましい場合があります。ただし、Div Elementsは自然に編集可能性を示す視覚的な手がかりを欠いており、ユーザーが自分と対話できるかどうかについて不確かにします。幸いなことに、最新のブラウザーは、ネイティブのテキスト入力コントロールの外観を模倣する特定のCSSプロパティを提供します。 -moz-appearance：Textfield-Multiline; -webkit-acpearance：textarea; ボーダー：1pxソリッドグレー; フォント：中moz固定; フォント：-webkit-small-control; 高さ：28px; オーバーフロー：自動; パディング：2px; サイズのサイズ：両方; 幅：400px; }

さらに、追加のリアリズムのために特定のスタイルをTextarea要素に適用できます：

textarea { 高さ：28px; 幅：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;
}

＃入力{ -Moz-Appearance：Textfield; -Webkit-Appearance：Textfield; 背景色：白。 背景色：-moz-field; ボーダー：1px固体ダークグレイ。 Box-shadow：1PX 1PX 1PX 0ライトグレイ挿入物。 フォント：-moz -field; フォント：-webkit-small-control; マージントップ：5px; パディング：2px 3px; 幅：398px; }

textarea {
  height: 28px;
  width: 400px;
}

output

は、結果のHTMLとCSSが次の出力を生成します。オペラとIE9。