直接给 select 加 background 或 padding 失效，因其渲染依赖原生控件，appearance: none 无法完全接管样式与行为；应改用 div+button+ul 模拟，并确保键盘导航、焦点管理及 ARIA 属性完整。
为什么直接给 select 加 background 或 padding 总是失效？
因为浏览器对 select 元素的渲染高度依赖原生控件（尤其是 WebKit 和 Blink 内核），appearance: none 虽能移除默认样式，但不等于“完全接管”——下拉箭头、聚焦边框、选项列表仍由系统控制，且部分属性（如 background 在 Firefox 中对 option 无效）被硬性限制。
-
select的:hover和:focus伪类支持不一致，Firefox 不支持select:hover -
option几乎无法用 CSS 设置内边距、圆角或阴影，Chrome 会忽略padding，Firefox 忽略border-radius - iOS Safari 完全禁用
appearance: none对select的效果，点击后仍弹出原生选择器
用 div + button + ul 模拟的最小可行结构
核心是放弃 select 标签，用语义化但可完全控制的元素组合替代。关键不是“看起来像”，而是行为对齐：键盘导航（Tab/ArrowUp/ArrowDown）、空格/回车触发、ESC 关闭、焦点管理。
- 外层用
div包裹，设role="combobox"和aria-expanded - 触发按钮用
button，设aria-haspopup="listbox"和aria-controls="id-of-list" - 下拉列表用
ul，每个选项用li包裹button（不用a，避免页面跳转） - 所有交互必须手动绑定
keydown事件处理方向键和 ESC，不能只靠 CSS
<div role="combobox" aria-expanded="false">
<button aria-haspopup="listbox" aria-controls="my-list">请选择</button>
<ul id="my-list" role="listbox" hidden>
<li role="option"><button data-value="1">选项一</button></li>
<li role="option"><button data-value="2">选项二</button></li>
</ul>
</div>
position: absolute 下拉列表的定位陷阱
绝对定位本身没问题，但常见错误是把 ul 直接放在 body 下导致脱离上下文流，或父容器用了 overflow: hidden 把下拉项裁掉。
- 父
div必须设position: relative，否则ul的top: 100%会相对于视口而非按钮定位 - 避免在父级加
transform（如scale或translate），它会创建新的定位上下文，导致ul错位 - 如果父容器有
z-index，下拉列表需设更高值，且注意层级是否被其他fixed元素遮挡 - 移动端需额外监听
resize和scroll，动态重算位置，否则滚动时下拉框悬空
键盘操作中容易漏掉的三个细节
可访问性不是加几个 aria- 属性就完事，键盘流必须闭环。
-
ArrowDown第一次按下时，焦点应落到第一个button（li > button），而不是停留在触发按钮上 - 当焦点在最后一个选项按
ArrowDown，应循环回到第一个；同理ArrowUp到顶后循环到底部 - 按
Home/End键需分别聚焦首项/末项，很多实现只处理了方向键
这些逻辑没法靠 CSS 解决，必须用 JavaScript 绑定 keydown 并手动 .focus()，且要防止默认行为（e.preventDefault()）干扰滚动。
原生 select 的键盘行为是浏览器内置的，模拟时连 Space 键展开、Enter 确认、Escape 收起都得自己写——少一个，屏幕阅读器用户就卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
