تُمنح الخيارات للمستخدم عند وجود قيم متعددة لعنصر واحد ، حيث يمكن للمستخدمين تحديد خيار وفقًا لتفضيلاتهم. إنه موجود في أشكال مختلفة ، مثل مربع الاختيار والقائمة المنسدلة وزر الاختيار. وبشكل أكثر تحديدًا ، توفر القائمة المنسدلة قوائم محددة مسبقًا بالخيارات التي تتيح للمستخدم تحديد أحدها.
سيشرح هذا الدليل الإجراء الخاص بتعديل لون الخيار المحدد. لهذا ، أولاً ، سننشئ قائمة منسدلة ونصممها باستخدام CSS ثم نغير لون الخيار المحدد.
هيا بنا نبدأ!
كيفية إنشاء قائمة منسدلة باستخدام HTML & CSS؟
في HTML ، يمكنك إنشاء قائمة منسدلة باستخدام ' <التسمية> '،' <اختر> ' و ' <خيار> '. لفهم الأمر بشكل أكثر وضوحًا ، دعنا ننتقل إلى بنية القائمة المنسدلة.
بناء الجملة
إليك صيغة القائمة المنسدلة:
< ضع الكلمة المناسبة > نص ضع الكلمة المناسبة > < تحديد > < اختيار القيمة = '' > الخيار 1 اختيار > < اختيار القيمة = '' > الخيار 2 اختيار >
... < اختيار القيمة = '' > الخيار اختيار > تحديد >
دعنا نشرح علامات HTML المستخدمة في البنية أعلاه:
<التسمية>: يتم استخدامه لتحديد الخيار المختصر
<اختر>: يتيح هذا العنصر للمستخدم تحديد عنصر من القائمة.
<خيار>: يتم استخدامه لتوفير خيارات القائمة المنسدلة.
نقدم هنا مثالا عمليا لشرح بناء الجملة أعلاه.
الخطوة 1: إنشاء قائمة منسدلة
أولاً ، سننشئ
ونضيف عنوانًا باستخدام العلامة
. لإضافة قائمة منسدلة بداخلها ، سنستخدم علامة تسمية ونضيف ' اختر دولة 'كتسمية. بعد ذلك ، سنستخدم علامة