原生 select 元素不支持可靠的 :hover 伪类变色，因渲染由系统接管；推荐用包裹容器（如 div）设置 hover 样式，并配合 appearance: none 提升兼容性；复杂需求需替换为 js 自定义下拉组件。
select 元素本身不支持 :hover 伪类的直接悬停变色
HTML 的 <select></select> 是原生表单控件，浏览器对其样式控制非常有限。直接对 select 写 :hover { background: red; } 在部分浏览器（如 Chrome）可能生效，但在 Safari 或旧版 Edge 中常被忽略——因为它的视觉渲染由操作系统或浏览器 UI 层接管，CSS 无法穿透。
真正可靠的 hover 变色方案：包裹容器 + CSS 作用于父级
把 <select></select> 包在一层 <div> 或 <code><span></span> 中，对这个容器设置 :hover，再通过后代选择器影响 select 或其伪元素（如箭头区域）。这是目前兼容性最好、无需 JS 的做法。
<div class="select-wrapper">
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
</div>
.select-wrapper:hover select { background-color: #f0f8ff; border-color: #4a90e2; }
注意点：
立即学习“前端免费学习笔记（深入）”；
- 必须确保
select没有设置background: transparent或!important覆盖，否则 hover 样式不生效 - 某些浏览器（如 Firefox）默认禁用
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 + 自定义下拉组件
如果要求悬停时整个下拉面板展开、选项高亮、背景渐变、阴影等复杂交互，原生 <select></select> 无法满足。此时应替换为基于 <div> + <code><ul></ul> + <li> 的自定义组件，并用 JS 控制 mouseenter/mouseleave 事件。
常见库如 Choices.js、TomSelect 或手写 React/Vue 下拉组件，都允许你自由定义 .dropdown:hover .dropdown-menu 的样式。
绕开原生限制的关键在于：不是“让 select 支持 hover”，而是“不用 select”。很多项目卡在这里，是因为没意识到原生控件的样式边界其实很硬。
