如何在<select>标签中显示所有选项</select>

时间:2009-12-04 16:40:15

标签: html css

我需要在html中创建一个 long (&gt; 20个选项)下拉列表,所以我使用&lt; select&gt;标签。但是超过20个项目,Firefox(以及其他)将添加滚动条,我希望所有选项都可见。我尝试使用css overflow 属性,但它不起作用。

任何简单的html / css解决方案,在我投降到Javascript之前?

(注意:&lt; select&gt;标记的 size =“n”属性不会生成下拉列表;它会使 n 选项可见< em>所有时间:不是我想要的)

4 个答案:

答案 0 :(得分:1)

在使用滚动条之前,没有办法告诉浏览器要列出多少选项。 HTML和CSS没有关于此的任何内容。

如果你确实想要这种行为,你必须实现自己的弹出窗口显示列表。

答案 1 :(得分:0)

你不能做这个跨浏览器,你必须创建一个custom dropdown

答案 2 :(得分:0)

这是在浏览器端处理的,所以你无法做很多事情。

一种解决方案是使用jquery插件,允许您自定义您的选择输入(如此之一:http://finalevillee.googlepages.com/jqueryplugin%3Acustomselect)。通过这种方式,您可以完全控制它的显示方式。

一个主要缺点是它没有默认的外观。

答案 3 :(得分:0)

我们已经找到了一种纯粹在css中实现该项的方法,但它基于javascript。

这个想法的核心方面也是避免与其他兄弟姐妹发生冲突

中心组件是CSS位置和变换参数,可确保正确定位

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>