最简可用的<select>菜单需用<select>包裹<option>，设name属性确保提交，首项value为空作提示，disabled和selected为布尔属性不可赋值，样式受限于浏览器原生限制。
直接用 <select> 就能实现基础下拉菜单，不需要 JS 或 CSS 也能工作；但想控制样式、支持搜索、多选或禁用某项，就得知道哪些属性管用、哪些浏览器不认。
怎么写最简可用的 <select> 菜单
核心是 <select> 包裹若干 <option>，value 决定提交值，text 是用户看到的内容：
<select name="city"> <option value="">请选择城市</option> <option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">广州</option> </select>
-
name必须设，否则表单提交时这个字段不会被发送 - 第一个
<option>设空value是常见做法，避免用户没选就提交了默认项 - 不加
selected属性时，浏览器默认选中第一个<option> - 移动端点开后显示原生选择器（iOS 是滚轮，Android 是列表），无法用 CSS 改外观
disabled 和 selected 怎么用才对
这两个布尔属性不是“开关式”的字符串，写上就生效，不写就没有；不能写成 disabled="false" —— 这样反而会禁用。
- 禁用整个下拉：
<select disabled>，所有选项都不可点，也不会提交值 - 只禁用某个选项：
<option disabled>暂未开通</option>，它会变灰且不可选，但不影响其他项 - 默认选中某项：
<option selected>上海</option>，注意只能有一个selected，多个时以最后一个为准 -
selected和value没有绑定关系，哪怕value是空，只要写了selected就会被默认选中
想改样式？先认清浏览器限制
原生 <select> 的箭头、边框、下拉面板几乎无法用 CSS 统一控制：Chrome 允许改 background 和 padding，Firefox 对 appearance 支持有限，Safari 则基本锁死内部结构。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 能安全改的：字体、颜色、宽度、高度、
border、background-color - 不能指望的：
::after伪元素盖箭头、option的背景色（仅部分 Chrome 支持）、下拉面板位置或滚动条样式 - 如果必须自定义外观，得用 JS 模拟（比如监听点击、动态生成
<div>列表），但会失去原生可访问性和键盘导航支持 - 无障碍方面：
<select>天然支持屏幕阅读器和Tab键切换，手写下拉容易漏掉role和键盘事件（如ArrowDown）
multiple 和 size 什么时候该用
multiple 让用户按住 Ctrl（或 Cmd）多选，size 控制可见行数——两者常一起用，但行为差异很大：
- 加了
multiple后，提交的不再是单个值，而是name对应的值数组（例如city=bj&city=sh） -
size="3"会让下拉变成“可见 3 行”的列表框，不用点开就能看到选项，适合选项少且需对比的场景 -
size值大于选项总数时，空白区域不可交互；等于 1 时退化为普通下拉（但依然支持多选） - 移动端对
multiple支持混乱：iOS Safari 弹出的是单选界面，Android Chrome 可能用长按模拟多选，实际体验差
真正麻烦的从来不是写几行 HTML，而是当产品说“这个下拉要带搜索、高亮关键词、支持拼音首字母跳转”时，你得立刻意识到：原生 <select> 做不到，得换方案，而且得提前跟设计对齐交互边界和兼容性底线。
