如何在HTML中设置多选下拉列表的高度-html教程-PHP中文网

唯一可靠方式是设置 size 属性，它直接指定默认显示行数，超出自动滚动；height、max-height、line-height 等 css 属性对 select[multiple] 无效，且移动端支持不稳定。

如何在html中设置多选下拉列表的高度

原生 <select multiple></select> 的高度不能靠 height 或 max-height 控制，唯一可靠方式是设置 size 属性。它直接告诉浏览器“默认显示几行选项”，超出自动滚动，且所有现代浏览器都支持。

常见错误现象包括：给 select[multiple] 加 height: 200px，结果只压扁了顶部边框区域，点开后还是默认展开 10+ 行；或加 line-height 到 option 上，完全无反应。

虽然 size 控制的是整体列表高度，但你仍可通过 CSS 调整顶部可交互区域的视觉高度，让多选框和旁边输入框对齐更自然。关键不是改 height，而是用 padding 配合 box-sizing: border-box。

注意：这仅影响“未展开时”的容器高度，不影响弹出菜单——但 <select multiple></select> 本来就没有弹出菜单，所以这个调整是真正生效的。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

写法：select[multiple] { height: 40px; box-sizing: border-box; padding: 8px 12px; }
必须加 appearance: none 隐藏原生多选箭头（实际是复选框图标），否则 padding 会导致图标错位
避免在 option 上设样式，包括 padding、height、line-height，全部无效
若需自定义复选框样式，只能用伪元素覆盖（需配合 position: relative 和 ::before），但无法改变系统复选状态的渲染逻辑

max-height 对 <select multiple></select> 完全无效——不是写法问题，是浏览器根本不解析该属性作用于该元素。你设了 max-height: 150px，开发者工具里能看到样式被标记为 “invalid” 或 “not applied”。

根本原因：select[multiple] 是替换元素，其内部选项区域由 UA 样式控制，CSS 无法穿透。所谓“高度”，其实是 size × 每行默认高度（通常 20–24px）的乘积，而这个每行高度浏览器不暴露给 CSS。

试图用 transform: scale(1, 0.8) 压缩整体高度？会同步压缩文字和复选框，可读性下降，Lighthouse 报 “form elements not scalable”
给父容器加 overflow: hidden？只会裁剪掉底部选项，用户无法滚动查看，且破坏表单语义
移动端热区要求 ≥ 44×44px，硬缩到 32px 高度可能导致点不中复选框，尤其在 iOS 上

如果你的需求包含以下任意一条，原生方案已到极限：固定最大高度（如严格 180px）、统一行高（如每项 36px 含图标）、hover 高亮、键盘导航（Tab/ArrowDown）、搜索过滤、虚拟滚动（>50 项）。

此时应放弃 select[multiple]，改用 <div class="multi-select"> <button></button><ul aria-multiselectable="true"></ul> </div> 结构，再用 JS 同步值并管理焦点。

<ul></ul> 上设 max-height: 180px; overflow-y: auto;，高度真正可控
每个 <li> 可自由设 padding、min-height、display: flex，图标和文字垂直居中稳定
必须手动处理：点击 li 切换 aria-selected、Enter 确认、Escape 关闭、Tab 跳出
原生 select 保留在 DOM 中（position: absolute; opacity: 0; pointer-events: none;），确保表单提交和验证逻辑不变