原生的height仅影响顶部触发区，弹出菜单由系统控制无法CSS干预；唯一轻量方案是padding+box-sizing；需用size属性控制展开行数；高度定制必须重写为自定义组件。

height 对原生 无效，所谓“一键修改”只能作用于顶部触发区，弹出菜单高度由系统控制，无法用 CSS 一键干预。

为什么直接写 height: 40px 在所有 上都失效

浏览器把 拆成两层：上层是可样式化的“选中区”，下层是操作系统绘制的独立弹出菜单。你设的 height 只可能压扁前者，后者完全不受影响——Chrome/Firefox/Safari 表现不一，但结果一致：点开后还是默认行高、默认项数、自带滚动条。

• line-height、padding 在 上静默失败，写了等于没写
• 移动端（尤其 iOS Safari）会强制将点击热区拉到 44×44px，哪怕你 height: 20px，实际响应区域仍是 44px
• transform: scale() 虽能缩放整个控件，但 Chrome 120+ 会报可访问性警告，iOS 上可能点不中

真正能“批量生效”的轻量方案：用 padding + box-sizing

这是唯一不依赖 JS、兼容所有现代浏览器、且视觉高度稳定的方案。它不欺骗浏览器，而是顺势利用可控制的部分。

• 统一加 box-sizing: border-box，确保 height 包含 padding 和 border
• 用 padding: 10px 12px 替代 height 控制视觉高度，文字自然垂直居中
• 加 appearance: none 和 -webkit-appearance: none 剥掉原生箭头，再用 ::after 画图标，避免错位
• 别碰 font-size 过小（如 12px），移动端至少保持 14px，否则热区易失效

想控制“展开后显示几行”？只认 size 属性

这是 HTML 原生唯一能稳定影响可见选项数量的方式，无需 JS，无障碍支持好。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 强制显示 5 行 ，超出自动滚动，高度由行数 × 浏览器默认行高决定
• size="1" 等效于默认下拉行为，但某些旧版 Safari 下可能丢失箭头，慎用
• 移动端慎用大 size（如 >6），长列表易撑开布局，且部分 Android WebView 忽略该属性
• 若需多选，可同时加 multiple，但 UI 风格会变成列表式，不再是传统下拉

真要“自定义展开高度”？必须放弃原生

当设计要求明确包含「max-height: 200px」「每行 line-height: 32px」「带自定义滚动条」时，绕不开重写。这不是优化，是替换。

• 结构用
• 设 max-height: 200px + overflow-y: auto，高度完全可控
• 每个
• 可自由设 padding、line-height、height
• 必须手动处理：aria-expanded 切换、Escape 关闭、ArrowDown/Up 导航、touchstart 阻断 300ms 延迟

最常被忽略的不是代码怎么写，而是所有自定义下拉都得过一遍可访问性校验——漏掉 aria-selected 或焦点管理，屏幕阅读器用户就卡死在第一个选项上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！