原生无法跨平台一致，因各系统ui规范不同；仅适用于输入建议；自定义下拉需重写dom并确保无障碍支持；size和multiple属性在移动端失效，应优先考虑第三方库或完全自定义实现。
原生 <select></select> 在不同操作系统上渲染差异大
macOS、Windows 和 iOS 的 <select></select> 默认样式完全不一致：macOS 用细边框+下拉箭头靠右，Windows 是带阴影的矩形框，iOS 则是全屏滚动选择器。这不是 bug，而是浏览器尊重系统 UI 规范的结果——appearance: none 只能隐藏原生控件，但无法统一底层交互行为。
常见错误是只加 appearance: none + 自定义背景色，结果在 iOS 上点击仍弹出系统 picker，而 Windows 上却只是个静态样式改动。
- macOS Safari 中
<select></select>不响应background-color设置（除非同时设-webkit-appearance: none） - iOS 上即使加了
appearance: none，点击依然触发原生 picker，无法拦截或替换动画 - Android Chrome 对
select的font-size支持不稳定，小字号可能被截断
用 <datalist></datalist> 替代 <select></select> 的适用边界
<datalist></datalist> 是唯一真正跨平台一致的原生下拉方案，但它不是“下拉菜单”，而是输入建议辅助组件。它不提供强制单选语义，也不支持禁用选项或分组（<optgroup></optgroup>），且无法通过键盘 ↑/↓ 导航选项（仅支持输入匹配后回车）。
适合场景：搜索框联想、地址/型号模糊输入；不适合场景：表单必填项、多语言切换、权限角色选择。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须搭配
<input list="xxx">使用，list属性值需与<datalist id="xxx"></datalist>匹配 - 选项无法设置
value与显示文本分离（<option value="en">English</option>中value不会被提交，实际提交的是用户输入的文本） - Firefox 不支持
placeholder在<input list>上生效，需 JS 模拟
自定义下拉必须放弃原生 <select></select> DOM 结构
想真正控制样式、动画、键盘导航和焦点管理，就得用 <div> + <code><button></button> + <ul></ul> 重写，把 <select></select> 隐藏为 position: absolute; opacity: 0; pointer-events: none; 仅保留语义和表单提交能力。
关键点不是“怎么画得像”，而是“怎么让键盘和屏幕阅读器认出来”：
- 触发按钮需有
aria-haspopup="listbox"和aria-expanded动态同步 - 下拉列表需设
role="listbox"，每个选项用role="option"+aria-selected - 按
Enter或Space应展开/收起；方向键需移动焦点并高亮对应项；Esc关闭列表 - 移动端需监听
touchstart并阻止默认行为，否则 iOS 会触发两次点击
size 属性和 multiple 在跨平台下的实际表现
<select size="3"></select> 在桌面端显示为多行可见列表，但在 iOS 和 Android 上几乎全部退化为单行 + 点击弹窗，且 size 值被忽略。加上 multiple 后，Windows 和 macOS 显示复选框，iOS 却变成多选 picker（无复选框视觉反馈），用户根本不知道要长按才能多选。
结论：只要涉及 size 或 multiple，就等于主动放弃跨平台一致性。真实项目中，这类需求基本都用第三方库（如 Choices.js）或完全自定义实现。
-
multiple表单提交时，name对应的值是数组，但旧版 IE8–9 需手动拼接字符串 -
size="1"在部分 Android 浏览器中仍会显示滚动条，需额外 CSS 清除：select::-webkit-scrollbar { display: none; } - Chrome 120+ 开始对
<select multiple></select>的focus样式支持更严格，:focus-visible才可靠
