select宽高“半生效”因它是替换元素，浏览器将其分为CSS可控的顶部选中区和系统级不可控的弹出菜单；实操需width:100%+box-sizing:border-box、padding撑高、appearance:none配自定义箭头、父容器禁padding，表格中需设宽再继承，真同步宽高须用div模拟下拉。
为什么 width + height 一起设在 select 上会“半生效”
因为 select 是替换元素，浏览器把它拆成两层：顶部选中区（CSS 可控）和弹出菜单（系统级黑盒，CSS 穿不透）。你设 width: 100% 和 height: 40px，可能只让按钮区拉满宽度、压扁高度，但点开后菜单依然按默认宽度展开、按系统行高堆叠 —— 宽度溢出、高度失控、箭头错位都是常见结果。
select 宽高对齐的实操组合（不改结构）
想让多个 select 在表单里视觉统一，靠单一属性不行，必须组合控制：
-
width: 100%+box-sizing: border-box：确保不因border或padding撑破父容器 -
height: 40px仅作视觉锚点，真正起作用的是padding: 10px 12px—— 它稳定撑开内容区，且各浏览器响应一致 -
appearance: none（加-webkit-/-moz-前缀）必须配自定义箭头背景，否则 Safari/Edge 下箭头位置漂移或被裁切 - 父级
<td> 或 <code><div> 不能有 <code>padding，否则width: 100%会失效；若需留空隙，用margin表格内
select宽度自适应的坑与解法在
<table> 中直接给 <code>select设width: 100%，Safari 常忽略，Chrome 可能裁掉右侧箭头。根本原因是表格单元格的渲染优先级高于子元素宽度假设。- 稳妥做法：给
<td> 设 <code>width（如width: 200px）或min-width，再让select用width: 100%继承 - 避免
white-space: nowrap或长<option></option>文本 —— 它们会强制撑宽整个下拉面板，破坏列宽；可用text-overflow: ellipsis+overflow: hidden截断（仅对选中区生效，弹出菜单仍需 JS 处理） - 移动端更简单：直接设
width: 100vw或用max-width: 100%配合display: block，绕过表格布局限制 -
<ul></ul>上设max-width: 240px+max-height: 200px+overflow-y: auto—— 这才是真生效的限界 - 每项
<li>用height: 36px+display: flex+align-items: center垂直居中，比line-height更稳 - 隐藏原生
select（position: absolute; opacity: 0; pointer-events: none;），保持表单语义和提交能力 - 别漏掉
aria-controls和aria-expanded—— 否则在 Windows 高对比模式或 VoiceOver 下，下拉状态不可感知
真正同步宽高？得放弃原生
select当设计稿要求“下拉菜单最大宽 240px、最大高 200px、每项 36px、滚动条定制”，原生控件无解。此时必须用
<div> + <code><button></button>+<ul></ul>模拟：立即学习“前端免费学习笔记（深入）”；
最易被忽略的点：自定义下拉的
<ul></ul>必须放在position: relative的父容器内，否则定位偏移；而它的max-height若设为auto或fit-content，过渡动画会直接失效。 - 稳妥做法：给
