不能直接用 <select multiple> 做下拉复选框，因其渲染受限、iOS 忽略 multiple、Android 不一致、需 Ctrl/Cmd 多选，语义与体验错位；真·下拉复选框应使用 <div> + <input type="checkbox"> 模拟。
原生 <select multiple> 无法真正实现“下拉式多选复选框”，它只是个固定高度的滚动列表，iOS 直接忽略 multiple，桌面端还要按 Ctrl/Cmd 才能多选——这不是用户想要的交互。
为什么不能直接用 <select multiple> 做下拉复选框
浏览器对 <select multiple> 的渲染是硬编码的：没有展开/收起动效、不显示勾选图标、无法点击文字触发、不支持搜索、CSS 几乎无效（appearance: none 在多数浏览器中失效）。更关键的是：
- iOS Safari 完全无视
multiple，点开会弹出单选原生 Picker - Android 各厂商实现不一致，部分机型无多选反馈或根本不可操作
- 用户必须记住按 Ctrl/Cmd —— 这不是“复选框”，是“多选列表”，语义和体验都错位
<select multiple> 的正确使用场景和取值陷阱
如果你确实需要原生控件（比如后端强依赖 name="tags[]" 提交格式），那它只适合纯 PC 端管理后台，且必须注意：
- 加
size属性控制可见行数，不设默认只显示 2 行，太小；建议size="4"或更高 -
select.value永远只返回第一个选中项，别用它取值；必须用select.selectedOptions - 表单提交时，同名字段会以
tags=1&tags=3&tags=5形式发送，后端需按数组接收（如 PHP 的$_POST['tags']是数组） - 移动端必须加降级提示，例如在
<select>外层包一层<div class="hint">PC 端按 Ctrl/Cmd 多选</div>
真·下拉复选框该怎么做：用 <div> + <input type="checkbox"> 模拟
这是目前唯一可靠、可样式化、可访问、跨平台一致的方案。核心结构是三层：
立即学习“前端免费学习笔记（深入）”；
- 触发区：
<button type="button" class="dropdown-toggle">，显示已选项数量或文本 - 遮罩层：防止点击穿透，尤其在移动端
- 选项区：
<div class="dropdown-menu">绝对定位，内部每个<label><input type="checkbox"> 文本</label>
JS 要监听 change 事件（不是 click），同步更新隐藏的 <select multiple> 值（如有后端兼容需求）或直接读取 checkbox 状态；触发按钮文本要用 Array.from(checkboxes).filter(cb => cb.checked).length 实时计算。
移动端 checkbox 组横向排列最容易被忽略的细节
横向排列在小屏上极易崩坏，不是加个 flex-wrap 就完事：
- 别写死
width，用flex: 1 1 auto或min-width: max-content让项自适应 - 长英文/数字撑破容器？加
word-break: break-word和overflow-wrap: break-word - 触摸目标太小？
label的min-height至少设为44px（iOS 最小推荐点击区域） - 别用
:hover控制显隐——移动端没 hover；改用 JS 切换showclass 或visibility
那些试图用 CSS “撬动” <select> 内部布局的方案，90% 在某个浏览器版本里会突然失效。真实项目里，只要不硬性要求用 <select> 标签，就直接上 <div> + <input type="checkbox"> + flex/grid。复杂度可控，体验可控，维护也更可控。
