Setting Height of Selectbox (Combobox) in IE

Working with Internet Explorer and creating web pages that behaves same in IE has always been frustrating for many web developers. One way of tackling IE problem is to create IE-Specific Stylesheet and thus it helps in avoiding breaking of design in IE.

While working on one of the requirement I had to set height of selectboxes on the webpage. Normally for setting up height of any html component we apply stylesheet. For example:

select {
	height: 50px;
}

The above technique work for most of the browsers except Internet Explorer. The combo box does not take the height specified in CSS and is displayed with the default height only.

I tried searching Internet to see if there are some IE Specific Hacks to increase the height of the listbox. But I couldn’t find a useful fix.

Finally I end up using a workaround of fixing height issue of selectbox in IE. Just increase font size of the select box and that will increase size of it.

select {
	font-size: 15px;
}

The above workaround is working for me. If you find any other useful trick for this problem please share it by comment on this article.