原生触控高度不足本质是系统限制选项渲染且iOS强制44×44px热区；应通过padding+min-height+box-sizing+font-size组合确保整体可点击区域≥44px。
为什么直接设 height 或 padding 不够用
原生 <select></select> 的触控高度，本质是“用户能点中的区域大小”。你给它设 height: 32px 或 padding: 4px 12px，只影响顶部选中区的视觉尺寸，但弹出菜单里的 <option></option> 渲染由系统接管，CSS 拿不到控制权。更关键的是：iOS Safari 强制要求触摸热区 ≥ 44×44px，低于这个尺寸，手指点下去大概率没反应——不是 bug，是规范。
必须保证 44px 最小触控高度的实操方式
别去压 <option></option>，而是把整个可点击区域（包括文字、内边距、边框）撑到至少 44px 高。最稳做法是组合使用：
-
padding: 12px 12px—— 上下各 12px，加上默认行高和字体，基本达标 -
min-height: 44px—— 显式兜底，防字体缩放或 UA 差异 -
box-sizing: border-box—— 确保 padding 和 border 算进 height 内 -
font-size: 16px—— 小于 16px 在 iOS 上可能触发自动缩放，反而破坏布局
示例：select { padding: 12px 12px; min-height: 44px; box-sizing: border-box; font-size: 16px; }
size 属性对触控高度的影响
size 是 HTML 属性，不是 CSS，它会让 <select></select> 渲染成常驻多行列表（非弹出式），此时每项触控区域由浏览器按默认行高计算，但整体容器高度可预测。不过要注意：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
-
size="4"表示显示 4 行，总高度 ≈ 4 × 浏览器默认行高（通常 36–40px），加上 padding 后容易超 44px，但滚动条位置不可控 - iOS Safari 可能无视
size，强制走全屏选择器，此时触控高度由系统决定，你的样式完全失效 -
size="1"虽然语义上等效于默认下拉，但在某些旧版 Safari 下会丢失箭头，且不保证触控热区达标
真正可控的触控高度方案：自定义 + 无障碍补全
当你需要明确控制每一项的触控高度（比如统一 48px）、支持键盘导航、适配高对比模式时，必须放弃原生 <select></select>。核心是：
- 隐藏原生元素：
select { position: absolute; opacity: 0; pointer-events: none; } - 用
<button></button>模拟选中区，设min-height: 44px、padding、font-size - 下拉层用
<ul></ul>，每项<li>设min-height: 48px、padding: 12px 12px，确保单点热区达标 - 必须同步
aria-expanded、aria-activedescendant和tabindex，否则屏幕阅读器无法识别操作状态
漏掉 aria-expanded 或没监听 Escape 键，会导致移动端焦点卡死、可访问性工具报错——这不是“锦上添花”，是触控可用的前提。
