HTML选择框的高度(下拉列表)
HTML选择框的高度(下拉列表)
提问于 2009-02-20 18:02:12
有没有人能确认一下，当你点击一个选择框时，下拉列表的高度是不可能被改变的( not )。
select的size属性让它看起来像一个列表，CSS中的height属性也没有多大用处。
回答 7
Stack Overflow用户
回答已采纳
发布于 2009-02-20 18:04:19
已确认。
下拉的部件设置为以下任一项：
- 显示所有条目所需的高度，或
- 显示
x条目所需的高度(使用滚动条查看剩余高度)，其中x为- 20在Firefox &Chrome
中为H1930在IE 6，7，8中为H210
- 16对于Opera 10
- 14对于Opera 11
- 22对于Safari4
- 18对于Safari 5
- 11在IE 5.0，5.5
中
- 在IE/边缘中，如果没有选项，则会显示包含11个空白条目的高得令人难以置信的列表。
对于上面的(3)，您可以在此JSFiddle中看到结果
Stack Overflow用户
发布于 2017-05-09 15:16:46
NO。无法更改select下拉菜单高度，因为该属性是特定于浏览器的。
但是，如果您想要该功能，那么有很多选择。您可以使用引导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>
Stack Overflow用户
发布于 2011-04-21 15:42:48
实际上你是可以的！不要纠结于javascript...我刚刚在做一个网站时遇到了同样的问题，如果你在CSS中为标签增加了'font-size‘属性，那么它也会自动增加高度。小气，但这是让我很困扰的事情哈哈
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/570642
复制相关文章
相似问题