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

テキスト フィールドに似た編集可能な DIV を作成する

多くの場合、ユーザーが次のコマンドを使用して Web ページの特定のセクションを編集できるようにすることが望ましい場合があります。編集可能な DIV。ただし、DIV 要素には当然、編集可能であることを示す視覚的な手がかりが欠けているため、ユーザーはそれらを操作できるかどうか不安になります。

この問題に対処するには、CSS スタイルを使用して、編集可能な DIV を外観に変換することができます。標準のテキスト入力フィールド。幸いなことに、最新のブラウザには、ネイティブ テキスト入力コントロールの外観を模倣する特定の CSS プロパティが用意されています。

テキスト フィールドのような DIV の CSS スタイル

次の CSS コードは、 DIV に適用して、テキスト フィールドのような外観を与えることができます。

#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;
}

さらに、特定のスタイルを適用することもできます。

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

テキスト フィールドのような入力の CSS スタイル

同様に、入力は、以下を使用したテキストフィールドCSS:

#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;    
}

input {
  margin-top: 5px;
  width: 400px;
}

出力

結果の HTML と CSS は次の出力を生成します:

[テキストエリアと入力、両方ともテキスト フィールドのように見えるようにスタイル設定されています]

このスタイルは Safari、Chrome、 Opera と IE9 では正常に機能低下します。

以上が編集可能な DIV をテキストフィールドのようにスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。