Blog by Anoop Kumar Sharma

I did Google about this issue but didn’t find any best solution, so I created a solution based on JQuery that works fine in all browsers.

just call badFixSelectBoxDataWidthIE() function on page load.

    function badFixSelectBoxDataWidthIE() {
        if ($.browser.msie) {
            $('select').each(function() {
                if($(this).attr('multiple') == false) {
                    $(this).mousedown(function() {
                        if($(this).css("width") != "auto") {
                            var width = $(this).width();
                            $(this).data("origWidth", $(this).css("width")).css("width", "auto");
                            
                            // If the width is now less than before then undo
                            if($(this).width() < width) {
                                $(this).unbind('mousedown');
                                $(this).css("width", $(this).data("origWidth"));
                            }
                        }
                    })
                    
                    // Handle blur if the user does not change the value
                    .blur(function() {
                        $(this).css("width", $(this).data("origWidth"));
                    })
                    
                    // Handle change of the user does change the value
                    .change(function() {
                        $(this).css("width", $(this).data("origWidth"));
                    });
                }
            });
        }
    }