HTML选择框的高度（下拉菜单）
有人可以确认无法更改单击选择框时显示的下拉菜单的高度。
选择的大小属性使它看起来像一个列表，CSS中的高度属性也没有太大的好处。
证实。
下拉的部分设置为：
- 显示所有条目所需的高度，或
- 显示
x个条目所需的高度（使用滚动条查看剩余的），其中x是- 20在Firefox和Chrome
- 在IE 6,7,8中30
- 16歌剧10
- 14歌剧11
- 22为Safari 4
- 18为Safari 5
- 11在IE 5.0,5.5中
- 在IE / Edge中，如果没有选项，那么11个空白条目的列表就很愚蠢。
对于上面的（3），您可以在此JSFiddle中看到结果
我一直在一个下拉更换jquery插件来解决这个问题。 就这篇文章而言，在外观和功能方面，它与本地下拉菜单几乎没有区别。
这里是一个演示（也是一个链接到下载）： http : //programmingdrunk.com/current-projects/dropdownReplacement/
这里是插件的项目页面：
http://plugins.jquery.com/project/dropdownreplacement
（更新:) jquery插件页面似乎不再工作。 我可能不会把我的插件，当他们得到它的工作，所以随时可以使用编程drunk.com链接进行演示/下载
其实你可以！ 不要麻烦的JavaScript …我只是坚持在一个网站，我正在做同样的事情，如果你增加在标签的CSS的'字体大小'属性，那么它也会自动增加高度。 小资，但这让我很困扰
这不是一个完美的解决方案，但它有一些工作。
在选择标签中，包含以下属性，其中“n”是可见的下拉列的行数。
<select size="1" position="absolute" onclick="size=(size!=1)?n:1;" ...>
这个解决方案有三个问题。 1）第一次点击鼠标时，会显示所有元素的快速闪烁。 2）位置设置为“绝对”3）即使有少于'n'的项目，下拉框仍然是'n'项目的大小。
智行答案是一个很好的选择，但我发现了一个错误，我onclick参数。 相反，将是：
<select size="1" position="absolute" onclick="size=(size!=1)?1:n;" ...>
（提及你必须用你需要的行数来替换“ n ”）
NO 。 无法更改选择下拉菜单的高度，因为该属性是浏览器特定的。
但是，如果你想要的功能，那么有很多选择。 你可以使用引导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="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>
