原生 select 元素不支持可靠的 :hover 伪类变色，因渲染由系统接管；推荐用包裹容器（如 div）设置 hover 样式，并配合 appearance: none 提升兼容性；复杂需求需替换为 JS 自定义下拉组件。
select 元素本身不支持 :hover 伪类的直接悬停变色
HTML 的 是原生表单控件，浏览器对其样式控制非常有限。直接对 select 写 :hover { background: red; } 在部分浏览器（如 Chrome）可能生效，但在 Safari 或旧版 Edge 中常被忽略——因为它的视觉渲染由操作系统或浏览器 UI 层接管，CSS 无法穿透。
真正可靠的 hover 变色方案：包裹容器 + CSS 作用于父级
把 注意点： 立即学习“前端免费学习笔记（深入）”； 以下写法在部分场景“看起来”有效，但属于浏览器行为差异，不推荐用于生产环境： 如果要求悬停时整个下拉面板展开、选项高亮、背景渐变、阴影等复杂交互，原生 常见库如 绕开原生限制的关键在于：不是“让 select 支持 hover”，而是“不用 select”。很多项目卡在这里，是因为没意识到原生控件的样式边界其实很硬。 包在一层 中，对这个容器设置 :hover，再通过后代选择器影响 select 或其伪元素（如箭头区域）。这是目前兼容性最好、无需 JS 的做法。
.select-wrapper:hover select { background-color: #f0f8ff; border-color: #4a90e2; }
select 没有设置 background: transparent 或 !important 覆盖，否则 hover 样式不生效select 的 background 修改，需同时加 -webkit-appearance: none; 和 appearance: none;
::after 伪元素模拟，但原生箭头本身不可单独着色Chrome/Firefox 中能生效但不稳定的操作
select:hover { color: #fff; } —— 文字颜色有时响应，但背景/边框常无效select:focus { outline: 2px solid #007bff; } —— 这是聚焦态，不是悬停，别混淆select 加 border 后再 hover 改 border-color，Chrome 下较稳定，Firefox 仍可能 fallback 到系统样式需要完全自定义 hover 效果？只能用 JS + 自定义下拉组件
无法满足。此时应替换为基于 的自定义组件，并用 JS 控制 mouseenter/mouseleave 事件。
Choices.js、TomSelect 或手写 React/Vue 下拉组件，都允许你自由定义 .dropdown:hover .dropdown-menu 的样式。
