HTML5 并未提供名为“listbox”的独立控件，但可通过 <select multiple> 配合 size 属性原生实现始终展开、多选、滚动可见的列表框效果，无需第三方库，完全符合语义化与无障碍标准。
html5 并未提供名为“listbox”的独立控件，但可通过 `
在桌面应用开发中，“ListBox”通常指一个始终可见、支持多选、带滚动条的垂直选项容器——这与 HTML 中常见的下拉式 <select>（即“dropdown”）有本质区别。幸运的是，HTML5 标准早已为此类需求提供了原生解决方案：<select> 元素结合 multiple 与 size 属性，即可精准复现传统 WinForms ListBox 的行为与外观。
✅ 正确用法：创建常驻可见列表框
<label for="fileList">请选择文件（支持 Ctrl/Cmd 多选）：</label> <select id="fileList" name="files" multiple size="6"> <option value="doc1">报告_2024Q3.docx</option> <option value="pdf1" selected>年度审计.pdf</option> <option value="img1">产品截图.png</option> <option value="xlsx1">销售数据.xlsx</option> <option value="txt1">日志摘要.txt</option> <option value="zip1">备份存档.zip</option> <option value="ppt1">项目汇报.pptx</option> </select>
- multiple：启用多选模式（用户可按住 Ctrl（Windows/Linux）或 Cmd（macOS）点击多个选项）；
- size="6"：强制显示 6 行可见选项，超出部分自动出现垂直滚动条；
- 无 required 或 autofocus 等干扰属性，确保行为纯粹、可控；
- 支持键盘导航（Tab 进入、方向键移动、Space 选中/取消）、屏幕阅读器朗读（ARIA-ready），天然满足 WCAG 2.1 AA 标准。
⚠️ 注意事项与最佳实践
- 避免混淆 size 与 CSS height：size 是 HTML 属性，定义可见行数（逻辑高度），而非像素尺寸；若同时设置 style="height: 200px"，可能引发布局冲突或滚动异常，建议优先依赖 size 控制高度。
- 禁用下拉行为：默认 <select> 在单选模式下点击会收起/展开，但 multiple + size 组合下永不折叠——它从始至终保持展开状态，真正实现“常驻列表框”。
-
样式微调建议（可选）：
select[multiple] { font-family: system-ui, -apple-system, sans-serif; border: 1px solid #ccc; border-radius: 4px; padding: 2px 4px; } /* 移除 Chrome/Firefox 中默认的聚焦蓝框（如需） */ select[multiple]:focus { outline: none; box-shadow: 0 0 0 2px rgba(0, 100, 255, 0.3); } - 服务端接收注意：提交时，multiple 选择框会以数组形式发送（如 files[]=pdf1&files[]=xlsx1），后端需按数组解析（PHP 中为 $_POST['files']，Node.js 中需解析为数组）。
✅ 总结
HTML5 的 <select multiple size="N"> 就是标准、轻量、无障碍、零依赖的“原生 ListBox”——它不是变通技巧，而是 W3C 明确定义的语义化方案。与其等待所谓“缺失控件”，不如善用现有标准：语义清晰、兼容性极佳（支持 IE9+ 及所有现代浏览器），且无需引入任何外部脚本或样式库。对于 Cameron 这样的资深开发者而言，这正是 Web 原生能力被低估却极具价值的典型范例。
