تحجيم حقل النص textarea باستعمال css

تغير المتصفحات أصبح سريعا وإضافة إلى سرعة النسخ توجد إضافات تسهل للمستخدم التحكم ببعض الأشياء ومنها كما تعلمون حقل النص textarea، وأعتقد أن الكل جرب خاصية ضغط الثلاث نقاط التي تظهر أخر الحقل و تحجيمه في العرض والطول، لكن سيظهر يوم تسألون وكيف أتحكم في هذا؟ فالجواب سهل لنرى كيف يتم ذالك.

css لتحكم بتحجيم حقل النص textarea

لتحكم بتحجيم حقل النص textarea باستعمال css تم إضافة تعريف css3 يقوم بذالك وهو resize ويمكن استعماله مع both, none, vertical, horizontal.
تحجيم عمودي وأفقي وهو الذي يأتي إفتراضيا
textarea { resize:both; }
بدون تحجيم
textarea { resize:none; }
تحجيم أفقي
textarea { resize:vertical; }
تحجيم عمودي
textarea { resize:horizontal; }
بالإضافة إلى ذالك يمكن التحكم في حجم التحجيم بالخصائص التالية:
max-width و min-widt أقصى وأدنى عرض
max-height و min-width أقصى وأدنى إرتفاع
على سبيل المثال يمكن وضع حقل نص لا يمكنه تحجيمه في العرض والتحجيم الأفقي لن يتزاوج 200px
textarea {
resize: vertical;
min-height: 80px;
max-height: 200px;
}

محمد حنين

الإسم الكامل محمد حنين أحد geek من أمد طويل ، مطور ويب، محب للحرية، مستعمل نضام لينوكس، وأخيرا مجرم باللغة العربية للأسف في وقتها. معلومات أكثر عني أو الإتصال بي Mohammed Hanine

You may also like...

5 تعليقات

  1. يقول ابراهيم:

    السلام عليكم أخي محمد

    هل هذه الطريقة متوافقة مع اضافة جت باك ونموذج الاتصال بنا المرفقة في الاضافة ؟؟؟

    أنا فعلاَ بحاجة لهكذا أمر فالموقع الذي أشرف عليه يزخر بنماذج المراسلة المختلفة

    وهذا أحدها

    http://ar.ufss.info/%D8%A3%D8%A8%D9%84%D8%BA-%D8%B9%D9%86-%D8%B7%D8%A7%D9%84%D8%A8-%D8%B4%D9%87%D9%8A%D8%AF/

    جزاك الله خيراً

    • يقول محمد حنين:

      وعليكم السلام ورحمة الله وبركاته،
      نعم متوافقة مع كل المتصفحات الجديدة التي تقرأ ذالك الأمر.
      لإضافة التحجيم الأفقي فقط في كل حقول textarea ، غير الملف style.css ،قيمة .contact-form textarea أضف resize: vertical;
      الكود الكامل
      .contact-form textarea {
      background: none repeat scroll 0 0 #FFFFFF;
      border: 1px solid #CCCCCC;
      height: 160px;
      margin-bottom: 20px;
      padding: 6px;
      resize: vertical;
      width: 96%;
      }

      وأي شيء أخر أنا رهن الإشارة

  2. يقول هشام:

    ابغي تكون ال textarra نفس هذا الذي نكتب فيه تعليق مرنه يزيد الارتفاع اتوماتيكي ولم يظهر لها سكرول بار

  3. يقول هشام:

    ممكن اضافة smiles (ابسامات)الى ال textarea كما في الفيس بوك

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *