Setting the height of a SELECT in IE

S

14

29

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?

Salvo answered 29/1, 2009 at 0:24 Comment(0)

S

22

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

Subtract answered 29/1, 2009 at 0:50 Comment(1)

This is correct as far as I can tell for plain vanilla IE7. Emulators and testers may differ, but using both Virtual Machines and real antique computers I can't make this work. You're right. Waste not your time with the ton of other stuff on SO which is wrong or misleading. – Testaceous 29/4, 2014 at 9:38

C

16

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.

Citreous answered 2/2, 2011 at 17:16 Comment(0)

B

7

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

Bald answered 29/1, 2009 at 1:43 Comment(1)

font-weight can also have an effect. "font-weight: bold;" was having a positive effect for me without even realizing it (until I removed it today and found this article ;) – Acreage 13/7, 2010 at 5:45

G

5

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?

Gwenette answered 2/1, 2013 at 15:40 Comment(2)

That fiddle won't even open in IE7. – Testaceous 29/4, 2014 at 9:21

Same here for IE8, fiddle can't be loaded properly... Between i have tested it and it didn't worked... – Plumber 22/7, 2014 at 11:21

I

3

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.

Innate answered 29/1, 2009 at 1:34 Comment(1)

I use jquery. Can anyone point to a good SELECT replacement that works with jQuery? – Salvo 29/1, 2009 at 1:51

K

3

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.

Krissykrista answered 4/7, 2011 at 11:48 Comment(0)

N

3

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;

Neath answered 2/6, 2012 at 14:48 Comment(0)

S

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)

Swainson answered 27/11, 2012 at 10:37 Comment(0)

A

2

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

Adore answered 23/11, 2011 at 23:0 Comment(0)

Q

2

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

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

Quiz answered 6/12, 2012 at 13:56 Comment(0)

U

1

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

Upanchor answered 25/10, 2010 at 9:8 Comment(0)

C

1

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.

Catechumen answered 1/11, 2011 at 3:12 Comment(0)

N

0

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.

Nedi answered 19/9, 2012 at 15:58 Comment(0)

S

0

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.

Sjoberg answered 27/6, 2014 at 5:18 Comment(0)

Recommended topics

Hot tags