Heim >Web-Frontend >CSS-Tutorial >Wie kann ich bearbeitbare DIVs wie Textfelder aussehen lassen?

Wie kann ich bearbeitbare DIVs wie Textfelder aussehen lassen?

Susan Sarandon
Susan SarandonOriginal
2024-11-30 17:52:12259Durchsuche

How Can I Make Editable DIVs Look Like Text Fields?

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!

Stellungnahme:
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