انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: تنسيق النماذج وحقول الإدخال في لغة CSS

Styling Text Inputs Selects Textareas تنسيق حقول النص والقوائم والمساحات

صمم نماذج إدخال احترافية متجاوبة وثنائية اللغة في CSS بتوريث الخطوط والحشوات المنطقية للأيقونات وحلقات التركيز الواضحة وتخصيص مفاتيح الاختيار وحالات التحقق البصري المريحة للمستخدم.
2 صفوف تعليمية
لغة CSS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

بما أن وسم <input> يمثل حقولاً نصية ومربعات اختيار وأزرار انتقاء في آن واحد، تجنب منح المحدد العام input عرضاً كاملاً بصورة عشوائية! واستهدف الحقول النصية بفئة موحدة مثل .form-control أو بمحددات السمات الدقيقة مثل input[type="email"] وinput[type="password"].

وفي مساحات الكتابة متعددة الأسطر <textarea> اضبط دائماً resize: vertical; min-height: 110px; ليتمكن الزائر من توسيع الصندوق رأسياً عند الحاجة دون سحبه أفقياً وإفساد أعمدة الشبكة. أما القوائم المنسدلة <select> فتلغي الخاصية القياسية appearance: none مظهر النظام القديم لتمنحها إطاراً وحشوة متطابقة تماماً مع بقية الحقول.

الصف 2 كود برمجي
CSS 
.field {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1.5px solid #c4b5fd;
  border-radius: 8px;
}
.select-box { appearance: none; }
textarea.field { resize: vertical; min-height: 100px; }
جرّب بنفسك

جميع فقرات هذا الدرس (تنسيق النماذج وحقول الإدخال في لغة CSS)