HTML 选择框的高度（下拉）

Question

有人可以确认 无法 更改单击选择框时显示的下拉菜单的高度。

select 的 size 属性让它看起来像一个列表，CSS 中的 height 属性也没什么用。

原文由 mkoryak 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

确认的。

下拉的部分设置为：

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

对于上面的 (3)，您可以在这个 JSFiddle 中看到结果

原文由 scunliffe 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

但是，如果您想要该功能，则有很多选择。您可以使用 bootstrap 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>

原文由 Raman Sahasi 发布，翻译遵循 CC BY-SA 3.0 许可协议