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

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

但是，如果您想要该功能，则有很多选择。您可以使用引导程序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 3

我知道这不是更改 高度的最佳实践select，但有一个代码可能可以帮助您更改高度。

使用标签size的属性select：

<select onfocus='this.size=6;' onblur='this.size=6;' onfocusout='this.size=null;' onchange='this.size=6; this.blur();'>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
    <option>Option 6</option>
    <option>Option 7</option>
    <option>Option 8</option>
    <option>Option 9</option>
    <option>Option 10</option>
    <option>Option 11</option>
    <option>Option 12</option>
    <option>Option 13</option>
    <option>Option 14</option>
    <option>Option 15</option>
</select>

Answer 4

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

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

这是插件的项目页面:

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

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