用 <select> 和 <option> 可直接实现基础下拉菜单，value 决定提交值，name 必须存在，required 需配合空 disabled selected 占位符；样式受限，仅能改字体、颜色等基础属性，无法定制箭头或下拉面板；多选需 multiple 属性但体验差，搜索需 JS 模拟；移动端行为不一致，可访问性要求 id、label 和描述性文本。
怎么用 <select> 和 <option> 实现基础下拉菜单
HTML 里最直接的方式就是用 <select> 包裹一组 <option>。浏览器会自动渲染成原生下拉控件，无需 JS 就能交互。
关键点：每个 <option> 的 value 属性决定表单提交时的实际值；text（标签内文字）是用户看到的选项内容。没写 value 时，会默认取 text 内容作为值。
-
<select>必须有name属性，否则提交时该字段不会被包含 - 加
required可强制选择（但需配合一个空<option>作占位，否则默认首项被选中，校验不生效） - 用
selected属性可预设默认选项，但更推荐用 JS 动态设置，避免服务端渲染冲突
<select name="country"> <option value="" disabled selected>请选择国家</option> <option value="cn">中国</option> <option value="us">美国</option> </select>
为什么 <select> 的样式很难改，以及能改什么
原生 <select> 是操作系统级控件，CSS 能控制的范围极小——比如文字颜色、背景色、字体，但无法修改下拉箭头、滚动条或弹出面板样式。强行用 appearance: none 会移除箭头且在 Safari 中可能失效。
真正可控的只有：
-
border、padding、font等基础盒模型和文本属性 -
background-image可覆盖箭头（需配合padding-right预留空间） -
color和background-color对已选文本有效，但对下拉列表中的选项无效（各浏览器策略不同）
如果设计要求高度定制（如圆角箭头、图标、悬停效果），必须用 div + JS 模拟，把 <select> 隐藏掉，仅用它做数据源或无障碍支持。
立即学习“前端免费学习笔记（深入）”；
怎么让下拉菜单支持多选或搜索
原生 <select> 支持 multiple 属性，但交互反直觉：用户需按住 Ctrl（macOS 是 Cmd）点击多个选项，且默认显示为滚动列表而非下拉式——这和绝大多数 UI 设计不符。
搜索功能则完全不在 HTML 规范内。浏览器不提供过滤能力，必须靠 JS 实现：
- 监听
input或keyup，动态显隐<option>（注意：部分浏览器不支持 JS 控制<option>的 display） - 更可靠的做法是放弃原生控件，用
<div>渲染选项列表，配合<input type="text">做搜索框 - 若仍想保留语义化和无障碍，可用
<select>作后备，再用 ARIA 属性（如aria-expanded、aria-controls）桥接自定义组件
容易忽略的兼容性和可访问性坑
移动端上，iOS Safari 的 <select> 会触发全屏选择器，Android 则多为底部弹窗——行为不一致，且无法通过 CSS 干预。如果页面需要统一交互逻辑（比如点击后跳转而非表单提交），原生控件就不可靠。
可访问性方面，光有 <label for="xxx"> 不够：<select> 必须有明确的 id，且 <option> 的 text 要足够描述性（避免“选项1”这种）；禁用状态要用 disabled，别只靠 CSS 灰掉。
还有个隐蔽问题：当 <select> 在 modal 或 fixed 容器里，下拉面板可能被裁剪。这不是 bug，是浏览器限制——它总在顶层渲染，不受父容器 overflow 影响。解决方案只能是换模拟下拉，或者调整 DOM 结构把 <select> 移到 body 底部动态挂载。
