HTML5 中唯一标准下拉菜单元素是 ，仅靠 + 实现，其余功能需 JS/CSS 模拟；原生不支持 showDropdown() 等方法，禁用用 disabled 而非 hidden，样式定制依赖 appearance: none 且受限于浏览器兼容性。
HTML5 中 <select></select> 是唯一标准下拉菜单元素
浏览器原生下拉菜单在 HTML5 里只靠 <select></select> + <option></option> 实现，没有所谓“HTML5 新下拉标签”。所有其他视觉效果（如搜索、多选、分组展开）都得靠 JS 或 CSS 模拟，原生 <select></select> 本身不支持。
常见错误现象：Uncaught TypeError: select.showDropdown is not a function —— 因为原生 <select></select> 根本没有 showDropdown() 这种方法；或者试图用 contenteditable 或 role="combobox" 替代却没配 ARIA 状态，导致屏幕阅读器读不出来。
-
<select></select>必须包含至少一个<option></option>，否则可能在 Safari 中不触发点击事件 - 移动端 iOS Safari 会强制用系统原生选择器，CSS 样式（如
appearance: none）仅影响桌面端外观，无法改变行为 -
multiple属性开启多选后，<select></select>高度自动撑开，不会弹出下拉框，这是预期行为，不是 bug
设置默认选中项：用 selected 还是 value？
页面加载时默认选中哪个选项，取决于 DOM 解析顺序和属性存在性，不是 JS 赋值时机。靠 JS 设置 select.value = "xxx" 只在渲染后生效，但初始状态由 HTML 决定。
使用场景：表单回填、配置项初始化、避免用户第一眼看到空白 <select></select>（特别是没设 required 时）。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 写死默认项：直接在对应
<option></option>上加selected属性，例如<option value="zh" selected>中文</option> - 动态默认：服务端渲染时注入
selected，比前端 JS 判断再赋值更可靠，避免 FOUC（闪动） - 注意
<option value=""></option>和<option>请选择</option>的区别：前者提交值为空字符串，后者无value属性时提交值为文本内容“请选择”
禁用某一项或整个下拉菜单：用 disabled，别碰 hidden
disabled 让选项不可点、不可聚焦、不参与表单提交；hidden 只是隐藏，仍可被脚本操作、仍占用逻辑位置、提交时照常发送 —— 完全不是禁用。
容易踩的坑：<option disabled>暂未开放</option> 在部分 Android WebView 中点击无反馈，且焦点跳过该行，但用户可能误以为选项失效是 bug。
- 整组禁用：
<select disabled></select>，所有<option></option>都灰掉，且change事件永远不会触发 - 单项禁用：
<option disabled value="beta">测试版（暂不开放）</option>，该行显示但不可选，视觉上建议加灰色文字提示 - 不要对
<option></option>用display: none或visibility: hidden，会导致语义断裂，屏幕阅读器跳过，且部分浏览器仍将其计入length
样式受限时怎么微调外观？appearance: none 的兼容性现实
想改箭头、圆角、边框？appearance: none 是起点，但它只是移除默认控件样式，不提供新布局能力。真要自定义，必须配合伪元素或包裹容器。
性能与兼容性影响：Safari 15.4+ 才完全支持 appearance: none 对 <select></select> 生效；旧版需用 -webkit-appearance: none，且必须显式设置 background，否则箭头残留。
- 基础重置：
select { -webkit-appearance: none; appearance: none; background: #fff url(arrow.svg) no-repeat right 0.5em center; padding-right: 2em; } - 不能直接给
<option></option>加背景色或字体大小 —— 大部分浏览器忽略这些样式，只有 Firefox 有限支持 - 如果需要完整定制（比如带图标、搜索、虚拟滚动），老实用
<div role="combobox"> + JS 控制，别硬改 <code><select></select>最常被忽略的一点：无论怎么调样式，
<select></select>的键盘操作逻辑（上下键切换、Enter 确认、Esc 关闭）是浏览器内置的，无法用 CSS 改变，也不响应keydown拦截 —— 这意味着自定义下拉一旦脱离原生结构，就得自己实现整套可访问性交互。
