Wie kann ich bearbeitbare DIVs wie Textfelder aussehen lassen?

Bearbeitbare DIVs mit dem Reiz von Textfeldern erstellen

Beim Entwerfen bearbeitbarer Benutzeroberflächen ist es wichtig, Benutzer visuell auf interaktive Elemente hinzuweisen. Ein DIV mit aktiviertem contentEditable bietet bearbeitbare Funktionen, sein Erscheinungsbild ist jedoch möglicherweise nicht intuitiv. Glücklicherweise können CSS-Techniken DIVs so umwandeln, dass sie die Ästhetik von Textfeldern nachahmen.

Ein Ansatz besteht darin, browserspezifische Erscheinungsbilder zu nutzen. Für Safari, Chrome und Firefox:

#textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
}

#input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
}

Dieses CSS simuliert einen Textbereich bzw. ein Texteingabefeld.

Wenn Sie eine browserübergreifende Kompatibilität bevorzugen, kann der folgende Stil ein ähnliches Ergebnis erzielen Ergebnis:

#textarea {
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

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

Mit diesen Optimierungen erhalten Ihre bearbeitbaren DIVs das vertraute Erscheinungsbild von Textfeldern, wodurch ihre Funktionalität erweitert wird benutzerfreundlich.

Das obige ist der detaillierte Inhalt vonWie kann ich bearbeitbare DIVs wie Textfelder aussehen lassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!