تنسيق القوائم بـ form-select | قوائم الاختيار المنسدلة في بوتستراب 5

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

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

يختلف المظهر الافتراضي لعنصر القائمة المنسدلة <select> اختلافاً كبيراً بين أنظمة التشغيل والمتصفحات. في Bootstrap 5، حل الكلاس القياسي .form-select محل كلاس custom-select الملغى من الإصدار الرابع، ليمنح القائمة إطاراً وحشواً مطابقاً تماماً لحقول .form-control مع استبدال سهم المتصفح التقليدي بأيقونة SVG مدمجة عالية الدقة.

يجري هذا التخصيص على الصندوق المبدئي للقائمة فقط، بينما تبقى قائمة عناصر <option> المنبثقة معتمدة على واجهة نظام التشغيل الأصيلة لضمان سهولة التمرير باللمس على الهواتف الذكية.

الصف 2 كود برمجي

HTML

<label for="roleSelect" class="form-label">Team Role</label>
<select class="form-select" id="roleSelect">
  <option selected>Select a role...</option>
  <option value="admin">Administrator</option>
  <option value="editor">Content Editor</option>
  <option value="viewer">Read-Only Auditor</option>
</select>

جرّب بنفسك

الصف 3 ملاحظة هامة

Custom Select Menus Styling تنسيق القوائم بـ form-select

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

جميع فقرات هذا الدرس (قوائم الاختيار المنسدلة في بوتستراب 5)