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

Menjadikan DIV Boleh Disunting Menyerupai Medan Teks

Selalunya, mungkin wajar untuk membenarkan pengguna mengedit bahagian tertentu halaman web menggunakan DIV boleh diedit. Walau bagaimanapun, elemen DIV secara semula jadi tidak mempunyai isyarat visual yang menunjukkan kebolehsuntingan, menyebabkan pengguna tidak pasti sama ada mereka boleh berinteraksi dengannya.

Untuk menangani isu ini, penggayaan CSS boleh digunakan untuk mengubah DIV boleh diedit menjadi rupa medan input teks standard. Nasib baik, penyemak imbas moden menyediakan sifat CSS khusus yang meniru penampilan kawalan input teks asli.

Penggayaan CSS untuk DIV Seperti Medan Teks

Kod CSS berikut boleh digunakan pada DIV untuk memberikannya rupa seperti medan teks:

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

Selain itu, gaya khusus boleh digunakan pada elemen textarea untuk realisme tambahan:

textarea {
  height: 28px;
  width: 400px;
}

Penggayaan CSS untuk Input Seperti Medan Teks

Begitu juga, input boleh digayakan untuk menyerupai medan teks menggunakan mengikuti CSS:

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

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

Output

HTML dan CSS yang terhasil menghasilkan output berikut:

[Imej kawasan teks dan input, kedua-duanya digayakan untuk kelihatan seperti medan teks]

Penggayaan ini serasi dengan Safari, Chrome dan Firefox, merendahkan dengan anggun untuk Opera dan IE9.

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