Setting Height of Selectbox (Combobox) in IE

Working with Internet Explorer and creating web pages that behaves same in IE has always been frustrating for many web developers. One way of tackling IE problem is to create IE-Specific Stylesheet and thus it helps in avoiding breaking of design in IE.

While working on one of the requirement I had to set height of selectboxes on the webpage. Normally for setting up height of any html component we apply stylesheet. For example:

select {
	height: 50px;
}

The above technique work for most of the browsers except Internet Explorer. The combo box does not take the height specified in CSS and is displayed with the default height only.

I tried searching Internet to see if there are some IE Specific Hacks to increase the height of the listbox. But I couldn’t find a useful fix.

Finally I end up using a workaround of fixing height issue of selectbox in IE. Just increase font size of the select box and that will increase size of it.

select {
	font-size: 15px;
}

The above workaround is working for me. If you find any other useful trick for this problem please share it by comment on this article.

Get our Articles via Email. Enter your email address.

You may also like...

10 Comments

  1. Stefan says:

    It seems to be related with the IE0s *has-layout* flag.
    If found that it works, if the width is given, too.
    select {
    height: 120px;
    width: 120px;
    }

  2. John says:

    I also had cross browser success by styling the option element:

    option {
    height: 20px;
    }

  3. Tony Jah says:

    Set Font size to higher pixels

  4. Shruthi says:

    Increasing the font size of combo box in ie7 makes a difference in look and feel of the page.. I wanted to know if there is any other alternative with which the combo box height can be fixed and text written in it also will be same as the text in other boxes..

  5. Przme says:

    In IE still doesn’t work. The same problem I found in Google Chrome.

  6. Grossglockner says:

    You can work around with the padding assignment on in CSS:

    form.register select {
    width:250px;
    padding: 3px 0px 3px 0px;
    }

    The only issue I had come along with this is that the select-button won’t scale with the size.
    Tested on newest versions of Firefox, IE and Chrome.

  7. satish says:

    Thanks Gaurav..It is working..

  8. smith says:

    Hi,

    The above approach is still not working.

  9. Yael says:

    *zoom: 1.6;
    *font-size: 9px;

    • Soufiane says:

      Ca marche Merci ;)
      It work , thank you ;)

Leave a Reply

Your email address will not be published. Required fields are marked *