Heim > Web-Frontend > CSS-Tutorial > Wie kann ich ein bearbeitbares DIV so gestalten, dass es wie ein Textfeld aussieht?

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

Mary-Kate Olsen
Freigeben: 2024-12-09 05:56:09
Original
235 Leute haben es durchsucht

How Can I Style an Editable DIV to Look Like a Text Field?

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;
}
Nach dem Login kopieren

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

textarea {
  height: 28px;
  width: 400px;
}
Nach dem Login kopieren

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;    
}
Nach dem Login kopieren
input {
  margin-top: 5px;
  width: 400px;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage