Select Problem with IE

Most of you probably ran into this article because you are half bald trying to figure out how to make your select box options show their full text in Internet Explorer when the select option has a static size set. Like the figure above illustrates, looks simple to fix but holy cow did it take a lot of research to figure out the best way to do it. After hours of research, I found out that I can’t do it with CSS alone. Many solutions I saw out there used Javascript and injected CSS in the Javascript. I’m not a big fan of CSS in Javascript. I’d rather have my CSS separate and change the way something looks in the stylesheet. For that reason I find myself using jQuery’s addClass, removeClass, toggleClass, and toggle quite often. That is what this code is going to do for you. I don’t think this is the best way for everyone, but it is the best way for me.

I’m not a programmer per say so I stick to the different code libraries. I am a jQuery man so my code requires jQuery. So Here is my code and I’ll explain after you see it.

    $(function() {
      $('select').focus(function(){
        $(this).addClass('ie_select');
      });
      $('select').blur(function(){
        $(this).removeClass('ie_select');
      });
    });

Place that code in the head of your document wrapped in a script tag or however you like to call your Javascript and create a specific CSS class called .ie_select in your stylesheet and style it according to what you need it to do. If you only want to apply the Javascript to specific browsers, you’ll need to add some conditional statements to your code.

It’s fairly straight forward code. This is what is going on:

1. When a select item has focus, add the CSS class of .ie_select to the select item.
2. When a select item loses focus or blurs, remove the CSS class of .ie_select from the select item.

I’ve found this code is much more readable to someone like myself who dabbles in jQuery when it comes to presentational use of it. That is exactly what the purpose of this code is, to fix presentation.

FYI

For what I was doing I had to add position: absolute to my CSS for .ie_select to get things to display the way I needed. A majority of the tutorials out there did nothing more than change from a fixed width on the select to a width: auto and that seemed to be all they needed. My layout was a bit more complicated and that didn’t work for me. This code will not style your select element for you, but it will enable you to be able to style it the way you need things styled.