原生<select multiple>必须显式设置size属性才能实现多行显示，CSS无法控制其行数；移动端兼容性差，跨端一致需换用自定义组件或库，并注意name属性末尾加[]确保后端接收数组。
multiple属性不配size就是自欺欺人
不设size时，<select multiple>在桌面浏览器里默认只显示单行（约22px高），带下拉箭头，和单选框长得一模一样——用户根本看不出能多选，更不会去按Ctrl或Cmd。这不是样式问题，是交互线索缺失。
-
size必须显式写在HTML里，比如size="4"，才能强制展开为多行可见列表 -
size值不能大于 - CSS的
height或min-height完全无效：它只撑容器，不触发多行渲染逻辑，也不改变原生交互 - 移动端无视
size，iOS Safari直接弹单选Picker，Android Chrome虽支持但UI简陋且无已选反馈
用CSS强行改高度？别试了
想用height: 100px或max-height拉高<select multiple>？浏览器会忽略，或者只让滚动条变长，但选项依然堆在单行里不可见。原生select的渲染逻辑由操作系统控件决定，CSS对它的尺寸控制力极弱。
-
appearance: none在部分Chrome/Firefox中可隐藏原生箭头，但无法改变多行显示行为 -
padding、line-height可能让文字居中，但不会增加可见行数 - 真正起作用的只有
size属性——它是唯一能告诉浏览器“我要展示N行”的信号
真要好看又可靠，就得换方案
如果你的需求是“用户一眼看懂可多选+点击即切换+跨端一致”，原生<select multiple>从设计上就不满足。它本质是个语义化容器，不是UI组件。
- 桌面端想免修饰键操作？得用JS监听
click事件，手动翻转option.selected状态 - 移动端iOS Safari基本废掉：
multiple属性被忽略，点开仍是单选全屏弹窗，且不显示已选项 - 90%以上真实项目都换成
<input type="checkbox">组合 + CSS折叠展开，或引入Choices.js、tom-select等库——它们根本不渲染select，而是用div+button重建交互
name属性漏加[]，后端收不到数组
即使HTML、JS、CSS全调好了，后端也可能只收到最后一个值。因为浏览器提交时，<select name="tags" multiple>会发多个tags=xxx字段，但PHP/Express/Django等框架默认只取最后一个，除非你明确写成name="tags[]"。
立即学习“前端免费学习笔记（深入）”；
- 不加
[]，后端拿到的是字符串或单个值，不是数组 - 即使后端能解析重复key（如Node.js的
req.query.tags可能是数组），也要额外判断和清洗，不如前端一步写对 - 这个坑不报错、不警告，数据静默丢失——最容易被忽略的，其实是提交链路最末端的这个小方括号
