HTML选择框的高度(下拉菜单)

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

选择的大小属性使它看起来像一个列表,CSS中的高度属性也没有太大的好处。

证实。

下拉的部分设置为:

  1. 显示所有条目所需的高度,或
  2. 显示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中
  3. 在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="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>