تعديل عرض القائمة المنسدلة في IE

في Internet Explorer، تعكس القائمة المنسدلة عرض صندوق الإسقاط الخاص بها، بينما في Firefox، تتكيف مع المحتوى. يستلزم هذا القيد توسيع صندوق الإسقاط لاستيعاب التحديد الأطول، مما يؤدي إلى صفحة ويب غير جذابة من الناحية الجمالية.

حل قائم على CSS لعروض متباينة

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

الطريقة المستندة إلى jQuery الموضحة أدناه تتعامل مع جميع أحداث لوحة المفاتيح والماوس، بما في ذلك النقرات:

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

ادمج هذا البرنامج النصي مع ملف CSS التالي:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

من خلال إضافة الفئة "الواسعة" إلى عناصر القائمة المنسدلة الضرورية، يمكنك تطبيق هذه التعديلات. على سبيل المثال:

    ...

استكشف العرض التوضيحي المباشر في jsfiddle هذا: [رابط]