Size of drop down box on select element.

Question

Hey everyone.

How do you set the size of the drop down box on a select element? Not the select element itself but the drop down box part of it when you click for options?

______________
|____________| input box
|            |
|            |
|            |
|____________| size of drop down box containing options

Thank you for your help!

Answer 1

You can't reliably. Some browsers may have a proprietary way to do it (but don't ask me what). Only option would be to create a custom drop down list control possibly using a drop down div similar to the way the jQuery autocomplete works, and not use a standard HTML SELECT.

Answer 2

This can't be done with a standard SELECT element. Support for styling SELECT and OPTION is very limited.

You can use a bit of scripting to replace the SELECT with an UL, that you can style perfectly. Checkout http://v2.easy-designs.net/articles/replaceSelect/ or http://v2.easy-designs.net/articles/replaceSelect2/ for examples.

Answer 3

If you just want to change the size to increase the number of options displayed, use HTML like: <select size="3" ... .

But if you want to change the "pop-up" size, than as others have said, you can't do this with CSS.

The best workaround is to use one of the many jQuery plugins. See this answer.