Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Menjadikan DIV Boleh Diedit Nampak Seperti Medan Teks?

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

Susan Sarandon
Susan Sarandonasal
2024-11-30 17:52:12254semak imbas

How Can I Make Editable DIVs Look Like Text Fields?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn