如何调整HTML select下拉框高度，实现单次仅展示10个选项

原生select的下拉弹出层属于浏览器原生UI组件，无法直接通过普通CSS控制高度和展示条数，下面提供3种可落地的实现方案：

方案1：原生属性+轻量JS实现（无额外依赖） #

利用select的size属性控制展示条数，配合简单的焦点事件实现下拉效果，对现有代码侵入性极低：

修改后的HTML代码 #

<div class="selectWrapper">
    <select name="typeSol" class="titSol" required size="1">
        <option value="" disabled selected>Select a Type</option>
        <option value="">Select a Type</option>
        <option value="">Select a Type</option>
        <option value="">Select a Type</option>
        <option value="">Select a Type</option>
        <option value="">Select a Type</option>
        <option value="">Select a Type</option>
        <option value="">Select a Type</option>
        <option value="">Select a Type</option>
        <option value="">Select a Type</option>
        <!-- 更多选项 -->
    </select>
</div>

新增JS代码 #

const selectEl = document.querySelector('.titSol');
// 获得焦点时展示10条
selectEl.addEventListener('focus', () => {
  selectEl.size = 10;
});
// 失去焦点或选中选项后恢复默认下拉形态
selectEl.addEventListener('blur', () => {
  selectEl.size = 1;
});
selectEl.addEventListener('change', () => {
  selectEl.size = 1;
  selectEl.blur();
});

补充CSS代码（可选，优化展示效果） #

select[size="10"] {
  height: auto !important;
  border-radius: 20px !important;
  position: absolute;
  z-index: 99;
  margin-top: 12em; /* 根据实际布局调整偏移量 */
}

方案2：自定义下拉组件（样式完全可控，兼容性最好） #

如果需要完全匹配现有设计风格、跨浏览器效果一致，建议放弃原生select，用div+ul/li模拟下拉组件，这种方式可以自由控制下拉面板高度，固定展示10条，超出部分滚动：

• 下拉面板固定高度设为10 * 单条option高度，超出设置overflow-y: auto即可
• 可以完全复用你现有写好的选择框样式，不需要调整设计效果
• 选中逻辑、表单提交逻辑可以通过JS简单实现，和原生select功能完全一致

方案3：浏览器特定CSS适配（兼容性有限） #

仅针对部分Chromium内核浏览器生效，适合内部项目等对兼容性要求不高的场景：

select {
  /* 单个option固定高度 */
  option {
    height: 32px;
  }
  /* 下拉面板最多展示10条，超出滚动 */
  &::-webkit-dropdown-list {
    max-height: calc(32px * 10) !important;
  }
}

注意：该方案不兼容Firefox、Safari等浏览器，生产环境不推荐使用。

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