HTML选择框的高度（下拉列表）

Question

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

select的size属性使它看起来像一个列表，CSS中的height属性也没有那么好。

Answer 1

证实。

下拉的部分设置为：

1. 显示所有条目所需的高度，或
2. 显示x条目所需的高度（使用滚动条查看剩余部分），其中x是 在Firefox和Chrome中有20个 在IE 6,7,8中有30个 16 for Opera 10 歌剧11的14 22 for Safari 4 18 for Safari 5 11在IE 5.0,5.5中
3. 在IE / Edge中，如果没有选项，则列出11个空白条目的愚蠢的高清列表。

对于上面的（3），你可以在这个JSFiddle中看到结果

Answer 2

我一直在研究下拉替换jquery插件来解决这个问题。截至本文，它在外​​观和功能方面几乎与本机下拉列表无法区分。

这是一个演示（也是下载链接）：http://programmingdrunk.com/current-projects/dropdownReplacement/

这是插件的项目页面：

http://plugins.jquery.com/project/dropdownreplacement

（更新:) jquery插件页面似乎不再有效。我可能不会在我们的新网站上运行时将其插入新网站，所以请随时使用programmingdrunk.com链接进行演示/下载

Answer 3

其实你有点可以！不要乱用javascript ...我只是对我正在制作的网站坚持同样的事情，如果你在CSS中增加标签的'font-size'属性，那么它也会自动增加高度。小资但是这让我很困扰哈哈

Answer 4

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

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

Answer 5

这不是一个完美的解决方案，但它确实有效。

在select标记中，包括以下属性，其中“n”是可见的下拉行数。

<select size="1" position="absolute" onclick="size=(size!=1)?n:1;" ...>

这个解决方案有三个问题。 1）在第一次鼠标点击期间显示所有元素的快速闪烁。 2）位置设置为'绝对'3）即使少于'n'项，下拉框仍将是'n'项的大小。

Answer 6

Chi Row的答案对于这个问题来说是一个很好的选择，但是我发现onclick参数的错误。相反，将是：

<select size="1" position="absolute" onclick="size=(size!=1)?1:n;" ...>

（并提到你必须用你需要的行数替换“n”）