Setting the height of a SELECT in IE

Question

IE seems to ignore the height set in CSS when rendering a HTML SELECT. Are there any work around\'s for this or do we have to just accept IE will not look as good as other b

Answer 1

Even though setting a CSS height value to the select element does not work, the padding attribute works alright. Setting a top and bottom padding will make your select element look taller.

Answer 2

You can use a replacement: jQuery Chosen. It looks pretty awesome.

Answer 3

There is a work-around for this (at least for multi-select):

• set select size attribute to option list size (use JavaScript or set it to any large enough number)
• set select max-height instead of height attribute to desired height (tested on IE9)

Answer 4

you can use a combination of font-size and line-height to force it to go larger, but obviously only in the situations where you need the font larger too

edit:

Example -> http://www.bse.co.nz EDIT: (this link is no longer relevant)

the select next to the big search box has the following css rules:

#navigation #search .locationDrop {
    font-size:2em;
    line-height:27px;
    display:block;
    float:left;
    height:27px;
    width:200px;
}

Answer 5

Use a UI library, like jquery or yui, that provides an alternative to the native SELECT element, typically as part of the implementation of a combo box.

Answer 6

See also inconsistent box model between input, select, ...