Bagaimanakah Saya Boleh Menjadikan DIV Boleh Diedit Nampak Seperti Medan Teks?

Mencipta DIV Boleh Disunting dengan Rayuan Medan Teks

Apabila mereka bentuk antara muka pengguna boleh diedit, adalah penting untuk mengisyaratkan pengguna secara visual kepada elemen interaktif. DIV dengan contentEditable enabled menyediakan kefungsian yang boleh diedit, tetapi penampilannya mungkin tidak intuitif. Nasib baik, teknik CSS boleh mengubah DIV untuk meniru estetika medan teks.

Satu pendekatan ialah memanfaatkan penampilan khusus penyemak imbas. Untuk Safari, Chrome dan Firefox:

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

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

CSS ini masing-masing mensimulasikan kawasan teks dan medan input teks.

Jika anda lebih suka keserasian merentas penyemak imbas, gaya berikut boleh mencapai yang serupa hasil:

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

Dengan tweak ini, DIV boleh edit anda akan mengambil rupa medan teks yang biasa, menjadikan fungsinya lebih mesra pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjadikan DIV Boleh Diedit Nampak Seperti Medan Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!