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

Bearbeitbare DIVs als Textfelder gestalten

Beim Erstellen eines DIV mit bearbeitbarem Inhalt mithilfe von contentEditable=true erkennen Benutzer möglicherweise nicht sofort, dass dies möglich ist kann aufgrund seines standardmäßigen Erscheinungsbilds bearbeitet werden. Dies kann behoben werden, indem das DIV so gestaltet wird, dass es einem Standardtexteingabefeld ähnelt.

Um diese visuelle Ähnlichkeit zu erreichen, können Sie die folgenden CSS-Stile nutzen:

#editable-div {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    width: 400px;
}

Diese Stile stellen einen Rahmen bereit , einstellbare Höhe durch Überlauf und Festlegen der entsprechenden Schriftart für ein Textfeld.

Zusätzlich können Sie benutzerdefinierte Stile in den Eingabeabschnitt {} einfügen, um das Textfeld weiter zu verbessern Design:

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

#inputted-div {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    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;    
}

Hier haben wir einen Rand hinzugefügt, um zu verhindern, dass die Eingabe zu nah an anderen Elementen erscheint, und haben Hintergrundfarbe, Rahmen und Schatten angepasst, um ein einheitliches Erscheinungsbild zu erzielen.

Durch die Implementierung dieser CSS-Stile können Sie ein bearbeitbares DIV in ein optisch ansprechendes Textfeld umwandeln und den Benutzern klar machen, dass sie dessen Inhalt ändern können.

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