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

Question 1

有人可以确认其不能够改变，当你点击一个选择框，显示一个下拉的高度。

select的size属性使其看起来像一个列表，CSS中的height属性也没有太大用。

Question 2

已确认。

下拉部分设置为：

显示所有条目所需的高度，或者
需要显示的高度x项（带有滚动条来查看剩余），其中x是
- 在Firefox和Chrome中为20
- 在IE 6、7、8中为30
- Opera 10为16
- Opera 11为14
- Safari 4为22
- Safari 5为18
- IE 5.0、5.5中的11
在IE / Edge中，如果没有选项，则是11个空白条目的高位列表。

对于上面的（3），您可以在此JSFiddle中查看结果

Question 3

我一直在研究下拉替换jQuery插件来解决这个问题。在这篇文章中，从外观和功能上来说，它与本地下拉列表几乎没有区别。

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

这是插件的项目页面：

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

（更新：）jQuery插件页面似乎不再起作用。当我的插件正常工作时，我可能不会将其放置在他们的新站点上，因此请随时使用programmingdrunk.com链接进行演示/下载。

Question 4

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>

展开摘要

Question 5

其实你可以！不用担心javascript ...我只是在为我正在制作的网站停留在同一件事上，如果您在CSS中为标记增加'font-size'属性，那么它也会自动增加高度。小资，但是这让我很困扰哈哈

Question 6

这不是一个完美的解决方案，但确实可行。

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

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

该解决方案存在三个问题。1）第一次单击时，所有显示的元素都会快速闪烁。2）位置设置为“绝对”。3）即使少于“ n”个项目，下拉框仍将保留“ n”个项目的大小。

Question 7

“ Chi Row”答案是解决该问题的一个不错的选择，但是我发现onclick参数存在错误。相反，将是：

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

（并提到您必须将“ n ”替换为所需的行数）

Question 8

您可以更改一个的高度。不要使用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>

我重点介绍了这一变化：

  <select id="option" style="height: 100px;">

甚至更好...

style="height: 100px;">

你看到了吗？

如果有帮助，请进行投票！