下拉菜单基本结构为包裹多个，value决定提交值、text为显示文字；用selected设默认项，disabled可禁用单选项或整个控件。

下拉菜单的基本结构怎么写

用 包住一组 就能生成原生下拉菜单，浏览器自动处理展开、聚焦、键盘导航等交互。不需要 JS 也能工作，但得注意几个细节：

• 默认只显示一个选项，点击才展开；加 multiple 属性可多选（此时表现更像列表框）
• 每个 的 value 属性决定表单提交时发送的值，text（标签内文字）是用户看到的内容
• 没设 value 的 ，提交时会把文本内容当值发出去，容易出编码或空格问题

如何让某个选项默认被选中

用 selected 属性标记，只能有一个生效（除非加了 multiple）。别用 JS 动态设 selectedIndex 或 value 来“模拟默认”，那样在页面刚加载时可能闪一下空白或错位。

<select name="city"><option value="">请选择城市</option>
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option></select>

注意：selected 是布尔属性，写成 selected="selected" 也行，但只写 selected 更常见。

禁用某一项或整个下拉框怎么操作

禁用单个 用 disabled，它仍会显示但不可选；禁用整个 也是用 disabled，这时整个控件变灰且无法聚焦。

• 暂不开放 —— 灰色显示，不能点，也不会被提交
• —— 整个下拉框失效，连展开动作都没了
• 服务端渲染时如果某项本该禁用但漏了 disabled，前端用 JS 补上容易被绕过，关键逻辑必须后端校验

样式受限时怎么微调外观

原生 的内部箭头、滚动条、聚焦边框等很难用 CSS 彻底重绘，尤其在 Safari 和旧版 Edge 上。真要高度定制，常见做法是隐藏原生控件，用

+

模拟，再用 JS 同步值到一个隐藏的 或 里保表单兼容性。

• 纯 CSS 方案：可用 appearance: none 去掉默认样式，再手动加背景箭头图，但下拉面板仍不可控
• 不要给 设 height 或 line-height 来强行撑高，会导致 iOS 上点击区域错位
• 移动端测试必做：iOS Safari 对 的点击热区、字体缩放、键盘唤起都有特殊行为

原生下拉最稳妥，但一旦涉及品牌色、圆角、图标、搜索过滤这些，就得接受“模拟控件 + 隐藏真实控件”的折中方案，而不是硬啃 CSS。