استخدم CSS لإنشاء مربع قائمة متعدد التحديد أكثر جمالاً

أعتقد أن قوائم التحديد المتعدد تعمل بشكل مثالي - ما عليك سوى الضغط باستمرار على مفتاح Ctrl أثناء النقر بالماوس لتحديد عناصر متعددة من القائمة. فيما يلي مربع قائمة نموذجي متعدد التحديد:

رمز مربع القائمة أعلاه هو كما يلي:

في الواقع، حتى إذا قمت بإضافة إرشادات الاستخدام إلى الصفحة، فلا يزال هناك مستخدمين لا يعرفون كيفية استخدام مربع القائمة متعدد التحديد. كما أن إضافة عناوين إضافية لكل عنصر من شأنه أن يساعد حقًا، لكنني لست متأكدًا مما إذا كان استخدام مربع قائمة عادي متعدد التحديد سيحقق هذا الغرض.

ومع ذلك، أعلم أنه باستخدام بعض CSS وقليلًا من JavaScript، يمكنك إنشاء مربع قائمة متعدد التحديد أجمل وإنشاء عنوان URL مكافئ لمربع قائمة عادي متعدد التحديد. وبهذه الطريقة، لا يتعين عليك تعديل كود الواجهة الخلفية الذي يتعامل مع مربع القائمة، بل تحتاج فقط إلى تجميل الواجهة الأمامية.