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