how to make all options visible in a <select> tag

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 opt开发者_运维知识库ions 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.

You can't do this crossbrowser, you'll have to create a custom dropdown.

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

Based on this answer

<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>