Question

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

select的size属性使它看起来像一个列表，CSS中的height属性也不是很好。

Answer 1

确认。

下拉的部分设置为：

显示所有条目所需的高度，或
显示x条目所需的高度（使用滚动条查看剩余条目），其中x为
- 20在Firefox＆amp;铬
- 30 in IE 6,7,8
- 16 for Opera 10
- 14 for Opera 11
- 22 for Safari 4
- 18 for Safari 5
- 11 in IE 5.0,5.5
在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属性。这样的事情。

＆＃13;

$('.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);
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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 ”）

Answer 7

我知道这不是更改 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 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;">

你看到了吗？

如果有帮助，请投票！

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

8 个答案: