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)
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.
We have found a way to implement the item purely in css but it is based on javascript.
A central aspect of the idea was also to avoid conflicts with other siblings
The central component is the CSS position and transform argument, which ensure a proper positioning
<style>
SELECT {
display: inline-block;
position: fixed;
transform: translate(0%, 0%);
width: 200px;
}
</style>
<script>
function selectselect(element)
{
element.size = element.options.length;
element.style.zIndex = "500";
}
function selecthide(element)
{
element.size = 0;
element.style = "";
}
</script>
<ul>
<li>
<select name="select1" onmousedown="selectselect(this)" onchange="selecthide(this)" onblur="selecthide(this)">
<option value="1">This is select number 1</option>
<option value="2">This is select number 2</option>
<option value="3">This is select number 3</option>
<option value="4">This is select number 4</option>
<option value="5">This is select number 5</option>
<option value="6">This is select number 6</option>
<option value="7">This is select number 7</option>
<option value="8">This is select number 8</option>
<option value="9">This is select number 9</option>
<option value="10">This is select number 10</option>
<option value="11">This is select number 11</option>
<option value="12">This is select number 12</option>
<option value="13">This is select number 13</option>
<option value="14">This is select number 14</option>
<option value="15">This is select number 15</option>
<option value="16">This is select number 16</option>
<option value="17">This is select number 17</option>
<option value="18">This is select number 18</option>
<option value="19">This is select number 19</option>
<option value="20">This is select number 20</option>
<option value="21">This is select number 21</option>
<option value="22">This is select number 22</option>
<option value="23">This is select number 23</option>
<option value="24">This is select number 24</option>
</select>
</li>
<li>
<select name="select1" onmousedown="selectselect(this)" onchange="selecthide(this)" onblur="selecthide(this)">
<option value="1">This is select number 1</option>
<option value="2">This is select number 2</option>
<option value="3">This is select number 3</option>
<option value="4">This is select number 4</option>
<option value="5">This is select number 5</option>
<option value="6">This is select number 6</option>
<option value="7">This is select number 7</option>
<option value="8">This is select number 8</option>
<option value="9">This is select number 9</option>
<option value="10">This is select number 10</option>
<option value="11">This is select number 11</option>
<option value="12">This is select number 12</option>
<option value="13">This is select number 13</option>
<option value="14">This is select number 14</option>
<option value="15">This is select number 15</option>
<option value="16">This is select number 16</option>
<option value="17">This is select number 17</option>
<option value="18">This is select number 18</option>
<option value="19">This is select number 19</option>
<option value="20">This is select number 20</option>
<option value="21">This is select number 21</option>
<option value="22">This is select number 22</option>
<option value="23">This is select number 23</option>
<option value="24">This is select number 24</option>
</select>
</li>
</ul>
