HTML 选择框的高度（下拉菜单）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/570642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Height of an HTML select box (dropdown)
提问by mkoryak
Can someone confirm that its notpossible to change the height of a dropdown that is shown when you click on a select box.
有人可以确认其不能够改变，当你点击一个选择框，显示一个下拉的高度。
The size attribute of the select makes it look like a list, the height attribute in the CSS doesnt do much good either.
select 的 size 属性使它看起来像一个列表，CSS 中的 height 属性也没有多大用处。
回答by scunliffe
Confirmed.
确认的。
The part that drops down is set to either:
下降的部分设置为：
- The height needed to show all entries, or
- The height needed to show
xentries (with scrollbars to see remaining), wherexis- 20 in Firefox & Chrome
- 30 in IE 6, 7, 8
- 16 for Opera 10
- 14 for Opera 11
- 22 for Safari 4
- 18 for Safari 5
- 11 in IE 5.0, 5.5
- In IE/Edge, if there are no options, a stupidly high list of 11 blanks entries.
- 显示所有条目所需的高度，或
- 显示
x条目所需的高度（带有滚动条以查看剩余），其中x是- 20 在 Firefox 和 Chrome
- 30 在 IE 6, 7, 8
- 16 为 Opera 10
- 14 为 Opera 11
- 22 为 Safari 4
- 18 为 Safari 5
- 11 在 IE 5.0、5.5
- 在 IE/Edge 中，如果没有选项，一个包含 11 个空白条目的愚蠢的高列表。
For (3) above you can see the results in this JSFiddle
对于上面的 (3) 你可以在这个JSFiddle 中看到结果
回答by mkoryak
i have been working on a dropdown replacement jquery plugin to combat this problem. As of this post, it is almost indistinguishable from a native dropdown in terms of look and functionality.
我一直在研究一个下拉替换 jquery 插件来解决这个问题。在这篇文章中，它在外观和功能方面与原生下拉菜单几乎没有区别。
here is a demo (also a link to downloads): http://programmingdrunk.com/current-projects/dropdownReplacement/
这是一个演示（也是一个下载链接）：http: //programmingdrunk.com/current-projects/dropdownReplacement/
here is the project page of the plugin:
这是插件的项目页面：
http://plugins.jquery.com/project/dropdownreplacement
http://plugins.jquery.com/project/dropdownreplacement
(update:) the jquery plugin page seems to no longer work. I will probably not put my plugin on their new site when they get it working, so feel free to use the programmingdrunk.com link for demo/download
（更新：）jquery 插件页面似乎不再工作。当他们开始工作时，我可能不会将我的插件放在他们的新网站上，所以请随意使用 Programmingdrunk.com 链接进行演示/下载
回答by Raman Sahasi
NO. It's not possible to change height of a select dropdown because that property is browser specific.
否。无法更改选择下拉列表的高度，因为该属性是特定于浏览器的。
However if you want that functionality, then there are many options. You can use bootstrap dropdown-menuand define it's max-heightproperty. Something like this.
但是，如果您想要该功能，则有很多选择。您可以使用引导程序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>回答by Aniqa Arif
Actually you kind of can! Don't hassle with javascript... I was just stuck on the same thing for a website I'm making and if you increase the 'font-size' attribute in CSS for the tag then it automatically increases the height as well. Petty but it's something that bothers me a lot ha ha
其实你还可以！不要为 javascript 烦恼......我只是在我正在制作的网站上坚持同样的事情，如果你在 CSS 中为标签增加“字体大小”属性，那么它也会自动增加高度。小资但它让我很困扰哈哈
回答by Chi Row
This is not a perfect solution but it sort of does work.
这不是一个完美的解决方案，但它确实有效。
In the select tag, include the following attributes where 'n' is the number of dropdown rows that would be visible.
在选择标记中，包括以下属性，其中“n”是可见的下拉行数。
<select size="1" position="absolute" onclick="size=(size!=1)?n:1;" ...>
There are three problems with this solution. 1) There is a quick flash of all the elements shown during the first mouse click. 2) The position is set to 'absolute' 3) Even if there are less than 'n' items the dropdown box will still be for the size of 'n' items.
该解决方案存在三个问题。1) 第一次单击鼠标时，所有元素都会快速闪烁。2) 位置设置为“绝对” 3) 即使少于“n”个项目，下拉框仍然是“n”个项目的大小。
回答by CatalanProgrammer
The Chi Rowanswer is a good option for the problem, but I've found an error i the onclickarguments. Instead, would be:
在智行的答案是问题的一个很好的选择，但我发现我的错误onclick论点。相反，将是：
<select size="1" position="absolute" onclick="size=(size!=1)?1:n;" ...>
(And mention you must replace the "n" with the number of lines you need)
（并提到你必须用你需要的行数替换“ n”）
回答by Dangerousgame
You can change the height of one.
Don't use height="500"(Just an example number). Use the style.
You can use <style>tag or just use this:
您可以更改一个的高度。不要使用height="500"（只是一个示例数字）。使用样式。您可以使用<style>标签或只使用这个：
<!DOCTYPE html>
<html>
<body>
<select id="option" style="height: 100px;">
<option value="1">Option 1
<option value="2">Option 2
</select>
</body>
</html>
I spotlight the change:
我强调了变化：
<select id="option" style="height: 100px;">
And even better...
甚至更好...
style="height: 100px;">
You see that?
你看到了吗？
Please up vote if it's helpful!
如果有帮助请点赞！
