Size of drop down box on select element

Question

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

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.

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.