如何限制select下拉选项列表高度 默认显示5项并启用垂直滚动条

原生select的下拉弹出层是浏览器/系统原生渲染的独立UI，不属于普通DOM流，网上大部分直接给select加max-height/overflow: auto的方案无效，核心原因是样式根本作用不到原生弹出层上。
下面两种方案都能直接适配当前的Bootstrap代码结构，复制即可使用。 #

方案1：CSS+少量原生事件（全浏览器兼容，优先选择） #

原理是利用原生size属性控制展开时的可见选项行数，配合绝对定位避免展开时挤压旁边的输入框、按钮元素，兼容性覆盖所有主流浏览器包括旧版IE。

• 先添加基础样式：

.input-group {
  position: relative;
}
/* select展开状态样式 */
select.form-select[size] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  min-width: 200px; /* 和闭合状态下的select宽度保持一致即可 */
  max-height: 210px; /* 对应5个选项+默认提示项的总高度，可根据实际字号微调 */
  overflow-y: auto;
}
/* 给后面的输入框留够左边距，避免被绝对定位的select遮挡 */
#autocomplete {
  margin-left: 200px;
}

• 给select标签加三个原生事件，不需要额外编写JS函数，直接内联到标签上即可：

<select 
  id="select" 
  class="form-select" 
  aria-label=".form-select example"
  onmousedown="if(this.options.length>5) this.size=6"
  onblur="this.size=1"
  onchange="this.size=1; this.blur()"
>

*参数说明：这里size设为6是因为第一个选项是默认提示「Select a Species」，6行刚好展示1个提示项+5个有效选项；如果不需要提示项，把size改成5就能刚好显示5个选项。

• 效果：点击select触发展开，固定高度下最多显示5个有效选项，剩余选项通过垂直滚动条查看，选中选项后自动恢复成普通下拉的闭合状态，不会破坏原有input-group的布局。

方案2：纯CSS实现（无JS，仅适配现代浏览器） #

如果不想加事件逻辑，可以用纯CSS方案，适配Chrome、Edge、Firefox等2020年之后发布的现代浏览器：

.input-group {
  position: relative;
}
select.form-select:focus {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  min-width: 200px;
  max-height: 210px;
  overflow-y: auto;
  background-image: none; /* 隐藏默认下拉箭头避免样式错乱 */
}
#autocomplete {
  margin-left: 200px;
}

• 注意：这个方案需要补一行极短的JS让选中后自动收起下拉，不然选中后select会保持展开状态：

document.getElementById('select').addEventListener('change', e => e.target.blur())

完整可直接运行的代码片段 #

<div class="input-group input-group-lg mb-3" style="position: relative;">    
  <input id="Species" type='hidden' name='Species' value=''> 
  <select 
    id="select" 
    class="form-select" 
    aria-label=".form-select example"
    onmousedown="if(this.options.length>5) this.size=6"
    onblur="this.size=1"
    onchange="this.size=1; this.blur()"
  >   
    <option class="option" value="ex" id="ex">Select a Species</option> 
    <option value="1" id="1">1</option>
    <option value="2" id="2">2</option>
    <option value="3" id="3">3</option>
    <option value="4" id="4">4</option> 
    <option value="5" id="5">5</option>
    <option value="6" id="6">6</option>
    <option value="7" id="7">7</option>
    <option value="8" id="8">8</option>  
    <option value="9" id="9">9</option>
    <option value="10" id="10">10</option>
    <option value="11" id="11">11</option>                                                           
    <option value="12" id="12">12</option>
    <option value="13" id="13">13</option>
    <option value="14" id="14">14</option> 
    <option value="15" id="15">15</option>
    <option value="16" id="16">16</option>
    <option value="17" id="17">17</option>
    <option value="18" id="18">18</option>  
    <option value="19" id="19">19</option>
    <option value="20" id="20">20</option>
    <option value="21" id="21">21</option>
    <option value="22" id="22">22</option>
    <option value="23" id="23">23</option>  
    <option value="24" id="24">24</option>
    <option value="25" id="25">25</option>
  </select>
  <input class="form-control" type="text" id="autocomplete" name="Keyword" placeholder="Type something" data-toggle="tooltip" data-bs-placement="top" style="margin-left: 200px;"> 
  <button class="btn btn-success" type="submit" id="search" value="submit">Search</button>
</div>

如果显示的选项数量不对，直接调整max-height的数值和size参数即可，数值越大单次显示的选项越多。

内容的提问来源于stack exchange，提问作者Jie Jiang