我需要在html中创建一个 long (> 20个选项)下拉列表,所以我使用< select>标签。但是超过20个项目,Firefox(以及其他)将添加滚动条,我希望所有选项都可见。我尝试使用css overflow 属性,但它不起作用。
任何简单的html / css解决方案,在我投降到Javascript之前?
(注意:&lt; select&gt;标记的 size =“n”属性不会生成下拉列表;它会使 n 选项可见< em>所有时间:不是我想要的)
答案 0 :(得分:1)
在使用滚动条之前,没有办法告诉浏览器要列出多少选项。 HTML和CSS没有关于此的任何内容。
如果你确实想要这种行为,你必须实现自己的弹出窗口显示列表。
答案 1 :(得分:0)
你不能做这个跨浏览器,你必须创建一个custom dropdown。
答案 2 :(得分:0)
这是在浏览器端处理的,所以你无法做很多事情。
一种解决方案是使用jquery插件,允许您自定义您的选择输入(如此之一:http://finalevillee.googlepages.com/jqueryplugin%3Acustomselect)。通过这种方式,您可以完全控制它的显示方式。
一个主要缺点是它没有默认的外观。
答案 3 :(得分:0)
我们已经找到了一种纯粹在css中实现该项的方法,但它基于javascript。
这个想法的核心方面也是避免与其他兄弟姐妹发生冲突
中心组件是CSS位置和变换参数,可确保正确定位
<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>