Bagaimana untuk Menggayakan DIV untuk Kelihatan Seperti Medan Teks?

Cara Menggayakan DIV untuk Meniru Penampilan Medan Teks

Jika anda mempunyai elemen DIV dengan contentEdiable enabled, pengguna boleh mengedit kandungannya . Walau bagaimanapun, penggayaan lalainya mungkin tidak menyampaikan sifatnya yang boleh diedit. Artikel ini meneroka penyelesaian untuk menjadikan DIV kelihatan seperti medan input teks.

Penggayaan CSS dan HTML

Sampel CSS dan HTML yang disediakan menunjukkan cara menggayakan DIV untuk menyerupai kawasan teks dan medan input. CSS termasuk gaya awalan vendor untuk menyokong penyemak imbas yang berbeza.

Output

Output yang terhasil mencipta DIV boleh diedit yang tidak boleh dibezakan secara visual daripada medan teks sebenar dalam Safari, Chrome dan Firefox. Ia dipaparkan dengan boleh diterima dalam Opera dan IE9 juga.

Demo dan Kod Contoh

Untuk demonstrasi yang berfungsi, lawati URL jsfiddle yang disediakan:

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

Sampel kod CSS dan HTML disediakan di bawah untuk anda rujukan:

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>

Sertakan teknik penggayaan ini ke dalam kod anda sendiri untuk mencipta elemen DIV boleh diedit yang menarik secara visual dan intuitif.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan DIV untuk Kelihatan Seperti Medan Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!