HTML 选择框的高度（下拉菜单）答案

【问题标题】：Height of an HTML select box (dropdown)HTML 选择框的高度（下拉菜单）
【发布时间】：2009-02-20 18:02:12
【问题描述】：

有人可以确认它不可能更改单击选择框时显示的下拉列表的高度。

select 的 size 属性使它看起来像一个列表，CSS 中的 height 属性也没有多大作用。

【问题讨论】：

下拉菜单是应用级控件，不是客户端级控件。（可悲）

标签： html html-select

【解决方案1】：

已确认。

下拉的部分设置为：

显示所有条目所需的高度，或
显示x 条目所需的高度（带有滚动条可查看剩余部分），其中x 是
- 在 Firefox 和 Chrome 中为 20
- 在 IE 6、7、8 中为 30
- Opera 10 为 16
- Opera 11 为 14
- 22 用于 Safari 4
- Safari 5 为 18
- IE 5.0、5.5 中的 11
在 IE/Edge 中，如果没有选项，则会出现一个包含 11 个空白条目的愚蠢高列表。

对于上面的（3），你可以在这个JSFiddle看到结果

【讨论】：

@scunliffe 如何在 chrome 中设置 (1)
如果您设置 size="1" 或什么都没有，因为它是默认设置，那么您的选择将是下拉列表而不是页面列表中的静态垂直。但是，如前所述，实际的下拉菜单高度由浏览器决定，作为开发人员，我们无法控制列表高度。
@scunliffe 为所提供的数量脱帽致敬 :)

【解决方案2】：

否。无法更改选择下拉菜单的高度，因为该属性是特定于浏览器的。

但是，如果您想要该功能，那么有很多选择。您可以使用引导程序 dropdown-menu 并将其定义为 max-height 属性。像这样。

$('.dropdown-menu').on( 'click', 'a', function() {
    var text = $(this).html();
    var htmlText = text + ' <span class="caret"></span>';
    $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});

.dropdown-menu {
    max-height: 146px;
    overflow: scroll;
    overflow-x: hidden;
    margin-top: 0px;
}

.caret {
	  float: right;
    margin-top: 5%;
}

#menu1 {
    width: 160px; 
    text-align: left;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
<div class="container" style="margin:10px">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

【讨论】：

【解决方案3】：

我一直在研究一个下拉替换 jquery 插件来解决这个问题。在这篇文章中，它在外观和功能方面与原生下拉菜单几乎没有区别。

这是一个演示（也是下载链接）： http://programmingdrunk.com/current-projects/dropdownReplacement/

这是插件的项目页面：

~~http://plugins.jquery.com/project/dropdownreplacement~~

（更新：） jquery 插件页面似乎不再起作用。当他们开始工作时，我可能不会将我的插件放在他们的新网站上，所以请随意使用programmingdrunk.com 链接进行演示/下载

【讨论】：

有趣的想法 - 我当然喜欢“剥皮”假选择列表的能力（我发现很多默认来自“本机”操作系统主题，因此看起来“奇怪”），以及控制列表中的内容我觉得很方便（因为 IE 为选项元素提供的样式选项很少）
此答案的最后一个链接已失效！
是的，但演示页面是比插件站点更好的资源。它也有一个下载。不过我会更新答案，谢谢
这看起来棒极了 :D 我想知道你是否有时间用一些更高版本的 jquery 来测试它。谢谢
我没有，但如果你这样做，请随时报告:) - 实际上我知道它适用于 1.8.2

【解决方案4】：

其实你可以！不要为 javascript 烦恼...我只是在我正在制作的网站上停留在同一件事上，如果您在 CSS 中为标签增加“font-size”属性，那么它也会自动增加高度。小事，但这是一件让我很困扰的事情哈哈

【讨论】：

我认为目标是在下拉框中显示更多选择，而不是简单地占用更多空间，这就是这个答案的作用。

【解决方案5】：

我知道这不是更改select 高度的最佳做法，但有一个代码可能会帮助您更改高度。

使用select标签的size属性：

<select onfocus='this.size=6;' onblur='this.size=6;' onfocusout='this.size=null;' onchange='this.size=6; this.blur();'>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
    <option>Option 6</option>
    <option>Option 7</option>
    <option>Option 8</option>
    <option>Option 9</option>
    <option>Option 10</option>
    <option>Option 11</option>
    <option>Option 12</option>
    <option>Option 13</option>
    <option>Option 14</option>
    <option>Option 15</option>
</select>

【讨论】：

【解决方案6】：

这不是一个完美的解决方案，但它确实有效。

在选择标签中，包含以下属性，其中“n”是可见的下拉行数。

<select size="1" position="absolute" onclick="size=(size!=1)?n:1;" ...>

这个解决方案存在三个问题。 1) 在第一次鼠标单击期间显示的所有元素都会快速闪烁。 2) 位置设置为“绝对” 3) 即使少于“n”个项目，下拉框仍然是“n”个项目的大小。

【讨论】：

好尝试但没有运气，也尝试用 onFocus 替换它。

【解决方案7】：

Chi Row 答案是解决问题的一个不错的选择，但我在 onclick 参数中发现了一个错误。相反，应该是：

<select size="1" position="absolute" onclick="size=(size!=1)?1:n;" ...>

（并提到您必须将“n”替换为您需要的行数）

【讨论】：

【解决方案8】：

你可以改变一个的高度。不要使用height="500"（只是一个示例编号）。使用风格。你可以使用<style>tag 或者直接使用这个：

<!DOCTYPE html>
<html>
<body>
  <select id="option" style="height: 100px;">
    <option value="1">Option 1
    <option value="2">Option 2
  </select>
</body>
</html>

我聚焦变化：

  <select id="option" style="height: 100px;">

甚至更好...

style="height: 100px;">

你看到了吗？

如果有帮助请点赞！

【讨论】：

当您点击<select> 元素而不是元素本身时，关于样式化打开的事物高度的问题。我在 10 多年前问过这个问题，当时我几乎不可能设计这个小部件。我相信这不再是这种情况了。