Setting The Height of a Select in Ie

Setting the height of a SELECT in IE

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

How set height of select dropdown list in IE 9

You cannot because the select box is a system control.

Example See Here

<select> HTML element with height

I've used a few CSS hacks and targeted Chrome/Safari/Firefox/IE individually, as each browser renders selects a bit differently. I've tested on all browsers except IE.

For Safari/Chrome, set the height and line-height you want for your <select />.

For Firefox, we're going to kill Firefox's default padding and border, then set our own. Set padding to whatever you like.

For IE 8+, just like Chrome, we've set the height and line-height properties. These two media queries can be combined. But I kept it separate for demo purposes. So you can see what I'm doing.

Please note, for the height/line-height property to work in Chrome/Safari OSX, you must set the background to a custom value. I changed the color in my example.

Here's a jsFiddle of the below: http://jsfiddle.net/URgCB/4/

For the non-hack route, why not use a custom select plug-in via jQuery? Check out this: http://codepen.io/wallaceerick/pen/ctsCz

HTML:

<select>
    <option>Here's one option</option>
    <option>here's another option</option>
</select>

CSS:

@media screen and (-webkit-min-device-pixel-ratio:0) {  /*safari and chrome*/
    select {
        height:30px;
        line-height:30px;
        background:#f4f4f4;
    } 
}
select::-moz-focus-inner { /*Remove button padding in FF*/ 
    border: 0;
    padding: 0;
}
@-moz-document url-prefix() { /* targets Firefox only */
    select {
        padding: 15px 0!important;
    }
}        
@media screen\0 { /* IE Hacks: targets IE 8, 9 and 10 */        
    select {
        height:30px;
        line-height:30px;
    }     
}

How to Set Height for the Drop Down of Select box

Try adding this to the <select> element:

onfocus='this.size=10;' 
onblur='this.size=1;' 
onchange='this.size=1; this.blur();

like:

   <select onfocus='this.size=10;' onblur='this.size=1;' 
        onchange='this.size=1; this.blur();'>

SAMPLE DEMO

Set select height cross browser

inherit the height of the parent div to your select tag

like,

select{
    top:0;
    bottom:0;
    position:absolute;
     height: inherit;  // or use 100%
}

check this Fiddle

Height of an HTML select box (dropdown)

Confirmed.

The part that drops down is set to either:

1. The height needed to show all entries, or
2. The height needed to show x entries (with scrollbars to see remaining), where x is
   
   
   • 20 in Firefox & Chrome
   • 30 in IE 6, 7, 8
   • 16 for Opera 10
   • 14 for Opera 11
   • 22 for Safari 4
   • 18 for Safari 5
   • 11 in IE 5.0, 5.5
3. In IE/Edge, if there are no options, a stupidly high list of 11 blanks entries.

For (3) above you can see the results in this JSFiddle

Open a select box on click with the size needed, i.e. without scrollbar

Based on SanRyu's answer, you can set the size just when needed, and reset it when you don't. You need a bit of JS for that though.

<select onfocus="this.size=24;" onblur="this.size=1;" onchange="this.size=1; this.blur();">`

Depending on the browser, a (disabled) scrollbar is still shown, but the height is correct now.

Demo: https://jsfiddle.net/4bxek3v2/5/

--

Edit: to hide the scrollbar, use this CSS: select { overflow: visible !important; }

---

Related Topics