Wie formatiere ich ein DIV so, dass es wie ein Textfeld aussieht?

So formatieren Sie ein DIV, um das Erscheinungsbild eines Textfelds nachzuahmen

Wenn Sie ein DIV-Element haben, bei dem „contentEditable“ aktiviert ist, können Benutzer dessen Inhalt bearbeiten . Der Standardstil vermittelt jedoch möglicherweise nicht den bearbeitbaren Charakter. In diesem Artikel wird eine Lösung untersucht, um das DIV wie ein Texteingabefeld aussehen zu lassen.

CSS- und HTML-Styling

Das bereitgestellte CSS- und HTML-Beispiel zeigt, wie das DIV formatiert wird um einem Textbereich und einem Eingabefeld zu ähneln. Das CSS enthält vom Hersteller vorgegebene Stile zur Unterstützung verschiedener Browser.

Ausgabe

Die resultierende Ausgabe erstellt ein visuell nicht unterscheidbares bearbeitbares DIV von tatsächlichen Textfeldern in Safari, Chrome und Firefox. Es wird auch in Opera und IE9 akzeptabel angezeigt.

Demo- und Beispielcode

Eine funktionierende Demonstration finden Sie unter der bereitgestellten jsfiddle-URL:

http://jsfiddle.net/ThinkingStiff/AbKTQ/

Die CSS- und HTML-Codebeispiele finden Sie weiter unten Referenz:

CSS:

textarea {
    /* shared properties */
    height: 28px;
    width: 400px;
}

#textarea {
    /* textarea-specific properties */
    -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;
}

input {
    /* shared properties */
    margin-top: 5px;
    width: 400px;
}

#input {
    /* input-specific properties */
    -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;    
}

HTML:

<textarea>I am a textarea</textarea>
<div>

Integrieren Sie diese Styling-Techniken in Ihren eigenen Code um optisch ansprechende und intuitiv bearbeitbare DIV-Elemente zu erstellen.

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