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 browsers

User · Answer

select     zoom  1 6     font-size  9px      If you change properties  size of select will change also in IE7

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

See also inconsistent box model between input  select

User · Answer

select     zoom  1 6     font-size  9px      If you change properties  size of select will change also in IE7

User · Answer

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    lt select name  myselect  id  myselect  style  font-size 15px  height 30px  gt   lt option value  someval  gt somedescr lt  option gt       lt  select gt    Hope this helps

User · Answer

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

User · Answer

You can use a replacement  jQuery Chosen  It looks pretty awesome

User · Answer

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

User · Answer

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

User · Answer

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    lt select name  myselect  id  myselect  style  font-size 15px  height 30px  gt   lt option value  someval  gt somedescr lt  option gt       lt  select gt    Hope this helps

User · Answer

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

User · Answer

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

User · Answer

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    lt select multiple  multiple  size  15  gt   lt option gt 1 lt  option gt   lt option gt 2 lt  option gt   lt option gt 3 lt  option gt   lt option gt 4 lt  option gt   lt  select gt    Doing this you ll have additional empty lines if your collection of items lenght is smaller than size value

User · Answer

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    lt select multiple  multiple  size  15  gt   lt option gt 1 lt  option gt   lt option gt 2 lt  option gt   lt option gt 3 lt  option gt   lt option gt 4 lt  option gt   lt  select gt    Doing this you ll have additional empty lines if your collection of items lenght is smaller than size value

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

You can use a replacement  jQuery Chosen  It looks pretty awesome

User · Answer

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

User · Answer

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

User · Answer

See also inconsistent box model between input  select

User · Answer

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

[html] Setting the height of a SELECT in IE

Examples related to html

Examples related to css

Examples related to internet-explorer