Height of an HTML select box (dropdown)

html

responsive-design

css

web-development

byAnton Shumikhin·Feb 9, 2025

Set the <select> box height with CSS:

select {
  height: 150px; /* Don't worry, it doesn't bite */
}

This makes the dropdown a fixed height of 150px. To maintain consistency across browsers, consider styling option elements or implementing a custom dropdown solution.

Decoding select box sizing

Adjusting a fixed height is simple; but, you might at times want your select box to adapt based on content or design specifications. Beware, sizes for default select box can differ between browsers. Let's delve into the details.

Browser-specific behavior

Working with Internet Explorer (IE)/Edge can lead to surprises, like seeing a long list of blank entries if the options don't fill the preset height of the select box. Therefore, testing across various browsers is key for ensuring a pleasing user experience.

Harnessing CSS

CSS is your styling companion and it can do more than just set a fixed height:

select {
  max-height: 200px;  /* Sky's the limit... or is it 200px? */
  overflow-y: auto; /* This box isn't claustrophobic */
  font-size: 18px; /* Because size does matter */
}

The max-height combined with overflow-y allows you to keep scrolling in check, improving usability. Also, larger font-size increases the height of individual options, no JavaScript involved!

Enhanced dropdowns with jQuery

Seeking enhanced customizations like styled scrolls or animations? jQuery plugins could be just what you need. Go easy on the page load times for the best user experience (UX).

Using Bootstrap for styled select boxes

If you're a fan of Bootstrap, the .dropdown-menu class is used for creating custom dropdowns with a preset max-height property that you can adjust for the perfect fit.

Size matters: The `<select>` tag's `size` attribute

The size attribute of the <select> tag dynamically adjusts the box's height based on the visible options. Ideal for showing all options without scrolling. It resets back to normal on blur.

Bringing style to dropdowns: Custom Carets & Cross-Browser Styles

Adding a custom caret with CSS is a nifty way to make your select box pop:

select {
  -webkit-appearance: none; /* Because we like to do things our way */
  -moz-appearance: none;    /* Freedom from default styles in Firefox */
  appearance: none;         /* Break the chains of default styles */
  background: url('caret-icon.png') no-repeat right; /* Your unique signature */
}