ein bearbeitbares Div ähneln einem Textfeld

oftmals ist es möglicherweise wünschenswert, Benutzer bestimmte Abschnitte einer Webseite mit editable Divs zu bearbeiten. DiviLemente fehlen jedoch natürlich die visuellen Hinweise, die die Bearbeitbarkeit angeben, und lassen Benutzer nicht sicher, ob sie mit ihnen interagieren können.

Um dieses Problem zu lösen, kann das CSS -Styling eingesetzt werden, um eine bearbeitbare DIV in einen Anschein eines Standard -Texteingabebuchs zu verwandeln. Glücklicherweise bieten moderne Browser spezifische CSS-Eigenschaften, die das Erscheinungsbild einheimischer Texteingänge imitieren. -moz-upearance: Textfield-Multiline; -Webkit-Appearance: Textbereich; Grenze: 1px Festgrau; Schriftart: mittel -moz -fixiert; Schriftart: -Webkit-Small-Control; Höhe: 28px; Überlauf: Auto; Polsterung: 2px; Größenänderung: beides; Breite: 400px; }

Zusätzlich können spezifische Stile auf das textarea -Element für hinzugefügten Realismus angewendet werden: textarea { Höhe: 28px; Breite: 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;
}

In ähnlicher Weise können ein Eingang gestylt werden, um einem Textfeld mit den folgenden CSS zu ähneln:

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

input { Rand: 5px; Breite: 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;    
}

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

. Opera und IE9.