Bagaimanakah Saya Boleh Menggayakan DIV Boleh Diedit Kandungan untuk Kelihatan Seperti Medan Teks?

Menggayakan DIV Boleh Disunting sebagai Medan Teks

Apabila mencipta DIV dengan kandungan boleh diedit menggunakan contentEditable=true, pengguna mungkin tidak segera menyedari bahawa ia boleh diedit kerana penampilan lalainya. Ini boleh diatasi dengan menggayakan DIV supaya menyerupai medan input teks standard.

Untuk mencapai persamaan visual ini, anda boleh memanfaatkan gaya CSS berikut:

#editable-div {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    width: 400px;
}

Gaya ini menyediakan sempadan , ketinggian boleh laras melalui limpahan dan tetapkan fon yang sesuai untuk medan teks.

Selain itu, anda boleh memasukkan penggayaan tersuai dalam input bahagian {} untuk mempertingkatkan lagi reka bentuk seperti medan teks:

input {
    margin-top: 5px;
    width: 400px;
}

#inputted-div {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    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;    
}

Di sini, kami telah menambah jidar untuk menghalang input daripada kelihatan terlalu rapat dengan elemen lain dan memperibadikan warna latar belakang, jidar dan bayangan untuk mencapai rupa dan rasa yang konsisten.

Dengan melaksanakan gaya CSS ini, anda boleh mengubah DIV boleh diedit menjadi medan teks yang menarik secara visual, menjelaskan kepada pengguna bahawa mereka boleh ubah suai kandungannya.

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