Wie kann ich ein bearbeitbares DIV so gestalten, dass es wie ein Textfeld aussieht?

Ein bearbeitbares DIV einem Textfeld ähneln lassen

Oft kann es wünschenswert sein, Benutzern das Bearbeiten bestimmter Abschnitte einer Webseite mit zu ermöglichen editierbare DIVs. DIV-Elementen fehlen jedoch natürlich die visuellen Hinweise, die auf Bearbeitbarkeit hinweisen, sodass Benutzer unsicher sind, ob sie mit ihnen interagieren können.

Um dieses Problem zu beheben, kann CSS-Stil verwendet werden, um ein bearbeitbares DIV in eine Art umzuwandeln Standard-Texteingabefeld. Glücklicherweise bieten moderne Browser spezifische CSS-Eigenschaften, die das Erscheinungsbild nativer Texteingabesteuerelemente nachahmen.

CSS-Styling für ein textfeldähnliches DIV

Der folgende CSS-Code kann auf ein DIV angewendet werden, um ihm ein textfeldähnliches Aussehen zu verleihen:

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

Darüber hinaus können bestimmte Stile zum Hinzufügen auf das Textbereichselement angewendet werden Realismus:

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

CSS-Styling für eine Textfeld-ähnliche Eingabe

Ähnlich kann eine Eingabe mithilfe des folgenden CSS so gestaltet werden, dass sie einem Textfeld ähnelt:

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

Ausgabe

Das Ergebnis HTML und CSS erzeugen die folgende Ausgabe:

[Bild eines Textbereichs und einer Eingabe, beide so gestaltet, dass sie wie Textfelder aussehen]

Dieser Stil ist mit Safari, Chrome und Firefox kompatibel, herabsetzend anmutig für Opera und IE9.

Das obige ist der detaillierte Inhalt vonWie kann ich ein bearbeitbares DIV so gestalten, dass es wie ein Textfeld aussieht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!