إن إجراء div قابل للتحرير يشبه حقل نص

في كثير من الأحيان ، قد يكون من المرغوب فيه أن يسمح للمستخدمين بتحرير أقسام محددة من صفحة ويب باستخدام divs قابلة للتحرير. ومع ذلك ، تفتقر عناصر Div بشكل طبيعي إلى الإشارات المرئية التي تشير إلى التحرير ، مما يجعل المستخدمين غير متأكدين مما إذا كان يمكنهم التفاعل معهم.

لمعالجة هذه المشكلة ، يمكن استخدام تصميم CSS لتحويل DIV قابلة للتحرير إلى مشوه لحقل إدخال نص قياسي. لحسن الحظ ، توفر المتصفحات الحديثة خصائص CSS محددة تحاكي ظهور عناصر التحكم في إدخال النص الأصلي. -ظهور الأوز: Textfield-multiline ؛ -بكيت ظهور: textarea ؛ الحدود: 1 بكسل رمادي صلب. الخط: متوسطة -ثمن ؛ الخط: -webkit-small-control ؛ الارتفاع: 28 بكسل ؛ الفائض: السيارات ؛ الحشو: 2px ؛ تغيير الحجم: كلاهما ؛ العرض: 400 بكسل ؛ }

بالإضافة إلى ذلك ، يمكن تطبيق أنماط محددة على عنصر Textarea لمزيد من الواقعية: الارتفاع: 28 بكسل ؛ العرض: 400 بكسل ؛ }

css التصميم للحصول على إدخال يشبه حقل النص

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

مدخل { الهامش: 5 بكسل ؛ العرض: 400 بكسل ؛ }

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

أوبرا و IE9.