The selectbox mystery of WordPress

The other day I wanted to use a selectbox with 5 elements in my plugin’s option page. No problem I thought:

<select size="5">
  <option "test1" />
  <option "test2" />
  <option "test3" />
  <option "test4" />
  <option "test5" />
  <option "test6" />
</select>

What everybody including me expects is something like this:

But I actually got this:

The mystery lies in the style sheet for the admin area:

#wpcontent select {
	padding: 2px;
	height: 2em;
	font-size: 12px;
}

This forces every selectbox to display only one element. I have no idea why this is implemented. There is also a ticket in the WP tracking system discussing this behaviour since two years.

The solution to this problem is quite easy:

<select style="height:auto" size="5">

Seems easy but costed me over 1 hour of my lifetime.

One thought on “The selectbox mystery of WordPress”

Leave a Reply

Your email address will not be published. Required fields are marked *