原生 无法实现符合用户预期的多选下拉交互，因其渲染为固定高度列表框、依赖冷门快捷键、移动端支持差且样式不可控，必须用自定义组件替代。
html下拉框加 multiple 属性就能多选，但默认样式和交互很反直觉
直接加 multiple 属性确实启用多选，但浏览器不会把它渲染成“点击展开的下拉菜单”，而是变成一个固定高度的滚动列表框（），用户必须按住 Ctrl（windows/linux）或 Cmd（macos）才能多选——这点绝大多数用户根本不知道，也完全不符合“下拉框”的心理预期。
为什么
移动端 safari 和 chrome 对 multiple 的支持极其有限：ios 上点开后只允许单选，且不显示任何多选提示；android 各厂商 webview 行为不一，部分会忽略 multiple 直接当单选处理。更关键的是，原生 无法用 css 精确控制下拉区域样式，也无法绑定点击外部自动收起等基础交互。
- 不能用
:focus-within或 js 模拟“点击空白处关闭” - 无法自定义选项勾选图标（如 ✅ 或复选框）
-
size属性强制显示行数，无法实现“点击才展开”的下拉动效
真正可用的多选下拉，得用自定义组件替代原生
主流方案是用
+ 如果坚持用原生
例如使用 choices.js 库时，只需：
立即学习“前端免费学习笔记（深入）”；
它会自动隐藏原生 ，生成一套可键盘操作（Tab/Arrow/Space）、支持搜索、带清空按钮的 ui，且在 iOS 和 Android 上行为一致。
如果坚持用原生
仅限管理后台、内部工具等对用户要求极低的场景。必须手动增强可访问性和基础可用性：
- 显式添加
aria-label或，否则屏幕阅读器无法识别多选意图 - 用
size="5"设定可见行数（不能设为1，否则退化为单选） - JS 监听
change事件时，用Array.from(select.selectedOptions).map(o => o.value)取值，别用select.value（它只返回第一个选中项） - 禁用
autocomplete="off"—— 某些旧版 edge 会因此阻止多选状态持久化
原生多选下拉框的“多选”只是 HTML 层面的声明，实际体验是否可用，90% 取决于你有没有绕过它的限制做二次封装。别被 multiple 这个单词骗了。