CODEWITHSUNDEEP
htmlcssinternet-explorer
Craig
Craig

Reputation: 36816

Setting the height of a SELECT in IE

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 browsers?

Upvotes: 29

Views: 116230

Answers (14)

mulllhausen
mulllhausen

Reputation: 4435

i wanted to set the height of the select box to be smaller than the default. i used

select {
   position: relative;
   height: 10px !important;
   display: inline-block;
}

this works on ie7 and ie8. you might only need the height property, i just added the position and display to override properties inherited from higher up the dom.

Upvotes: 0

Joshua
Joshua

Reputation: 4139

Yes, you can.

I was able to set the height of my SELECT to exactly what I wanted in IE8 and 9. The trick is to set the box-sizing property to content-box. Doing so will set the content area of the SELECT to the height, but keep in mind that margin, border and padding values will not be calculated in the width/height of the SELECT, so adjust those values accordingly.

select {
    display: block;
    padding: 6px 4px;
    -moz-box-sizing: content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    height: 15px;
}

Here is a working jsFiddle. Would you mind confirming and marking the appropriate answer?

Upvotes: 5

rostowner
rostowner

Reputation: 21

select{
  *zoom: 1.6;
  *font-size: 9px;
}

If you change properties, size of select will change also in IE7.

Upvotes: 2

Daimonion
Daimonion

Reputation: 61

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)

Upvotes: 3

Matt Campbell
Matt Campbell

Reputation: 2227

Not sure but I think this was a question not about the height of a 'multiple' type of select element but a drop-down type of select element. I have come across times when the drop-down looks squashed and does not show clearly the selected value. Undoubtedly it has to do with CSS style info in use on the page. The only way to stop it is either change the CSS (which would likely affect the whole page or parts of it in ways you don't want affected) or use style info in the select element itself to override the CSS that's clobbering it. Example:

<select name="myselect" id="myselect" style="font-size:15px; height:30px">
<option value="someval">somedescr</option>
...
</select>

Hope this helps.

Upvotes: 0

JackNova
JackNova

Reputation: 3931

It is correct that there is no work-around for this aside from ditching the select element, but if you only need to show more items in your select list you can simply use the size attribute:

<select multiple="multiple" size="15">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

Doing this you'll have additional empty lines if your collection of items lenght is smaller than size value.

Upvotes: 16

user640811
user640811

Reputation: 43

Finally found in http://viralpatel.net/blogs/2009/09/setting-height-selectbox-combobox-ie.html a simple solution (at least for IE8):

font-size:      1.0em;

BTW, for Google Chrome, found this workaround at How to standardize the height of a select box between Chrome and Firefox? */

-webkit-appearance: menulist-button;

Upvotes: 3

Andres SK
Andres SK

Reputation: 10974

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

Upvotes: 2

bachstein
bachstein

Reputation: 23

you could do similar to what facebook does, just add padding around. It is not as good as one could wish but looks reasonably well.

Upvotes: 1

brett
brett

Reputation: 791

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.

Upvotes: 3

Michal Cizmazia
Michal Cizmazia

Reputation: 883

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

Upvotes: 1

Darko
Darko

Reputation: 38860

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;
}

Upvotes: 7

Sparr
Sparr

Reputation: 7712

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.

Upvotes: 3

Ken Browning
Ken Browning

Reputation: 29091

There is no work-around for this aside from ditching the select element.

Upvotes: 22

Related Questions