I need to make a long (>20 options) drop-down list in html, so I use the <select> tag. But over 20 items, Firefox (among others) will add a scrollbar, and I want all the options to be visible. I tried to play with the css overflow property, but it won't work.
Any simple html/css solution, before I surrender to Javascript?
(note: the size="n" property of the <select> tag doesn't make a drop-down list; it makes n options visible all the time: not what I want)
You can't do this crossbrowser, you'll have to create a custom dropdown.
There isn't a way to tell the browser how many options to list before using a scroll-bar. HTML and CSS do not have anything regarding this.
If you really want this behavior, you'd have to implement your own pop-up displaying the list.
This is handled on the browser side, so you can't do much about it.
One solution would be to use a jquery plugin allowing you to custom your select inputs (like this one among others : http://finalevillee.googlepages.com/jqueryplugin%3Acustomselect). this way you have a total control over how it is displayed.
A major drawback being that it doesn't have the default look and feel.