如何在HTML中设置下拉列表的行高-html教程-PHP中文网

直接给设 height 或 line-height 无效，因浏览器对样式支持极弱，其渲染由操作系统或 ua 控制，css 无法穿透；唯一原生可控高度方案是 select 的 size 属性。

如何在html中设置下拉列表的行高

直接给 `<option></option>` 设 `height` 或 `line-height` 无效

浏览器对 <option></option> 元素的样式支持极弱，height、line-height、padding、margin 在 Chrome、Edge、Firefox 和所有移动端（尤其是 iOS Safari）中均被忽略。这不是写法问题，而是规范限制：选项渲染由操作系统或 UA 样式层接管，CSS 无法穿透。你写的样式连 warning 都不会触发，更不会生效。

iOS Safari 强制最小触摸热区为 44×44px，强行压缩会导致点不中
Firefox 某些旧版本看似响应 height，但升级后即失效，不可依赖
即使用 -webkit-appearance: none 隐藏箭头，也完全不影响 <option></option> 渲染逻辑

`size` 属性是唯一原生可控的“行数+高度”方案

size 是 <select></select> 的 HTML 原生属性，它让下拉框以常驻列表形式显示固定行数，此时整体高度由“行数 × 浏览器默认行高”决定，且滚动行为稳定、聚焦正常。

<select size="4"></select> → 展开时固定显示 4 行，超出自动滚动
size="1" 等效于默认单选下拉，但旧版 Safari 可能丢失箭头，慎用
size 和 multiple 可共存，但加了 multiple 后视觉变为多选列表，不再是传统下拉箭头样式
移动端长列表建议 size ≤ 6，避免 DOM 渲染过重

注意：size 值必须是数字字符串（如 "4"），不能带单位（"4px" 会失效）。

想统一视觉高度？用 `padding` + `box-sizing` 控制选中区

真正稳定、跨浏览器兼容的做法，是放弃控制弹出菜单本身，转而精确控制顶部“选中区”的视觉高度，并让文字垂直居中：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

padding: 10px 12px 撑开上下空间，比 height 更可靠
必须配合 box-sizing: border-box，确保总高度包含边框和内边距
显式声明 font-size 和 font-family，避免继承塌陷
加 appearance: none（含 -webkit-/-moz- 前缀）隐藏原生箭头，再用背景图或伪元素自定义

示例：

select {
  height: 40px;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 14px;
  appearance: none;
  background: url("data:image/svg+xml,...") no-repeat right 12px center / 16px;
}

需要真正自由控制每项行高？必须放弃原生 `<select></select>`

当设计要求明确包含以下任一条件时，原生控件已到能力边界：

所有选项严格统一高度（如 48px 行高 + 图标 + 多行文本）
要求 hover 高亮、ArrowDown/Enter 键盘导航、Escape 收起
选项超过 20 项，需虚拟滚动或搜索过滤
必须适配高对比模式、屏幕阅读器、Windows Narrator

此时应采用语义化自定义结构：<div class="custom-select"> <button></button><ul aria-expanded="false"><li role="option"></ul> </div>，并用 JS 同步原生 <select></select> 的值。关键点包括：

<ul></ul> 上设 max-height 和 overflow-y: auto，这才是真生效的限高
<li> 可自由设 padding、line-height、min-height
必须监听外部点击、Escape、ArrowDown/Up、Enter，否则键盘和辅助技术不可用
原生 <select></select> 不应移除，而应保留在 DOM 中（opacity: 0; position: absolute; pointer-events: none;），保证表单提交和可访问性