html下拉框的option元素不支持用css设置选中项背景色或文字色，因浏览器限制；可靠方案是js自定义下拉或美化select本体样式。
HTML 下拉框（<select></select>）本身不支持用纯 CSS 选中项（<option></option>）的背景色或文字色——这是浏览器限制，不是你写错了。
为什么 option 的 :checked 或 :selected 在多数浏览器里无效
Chrome、Edge、Safari 对 <option></option> 的样式控制极弱：color 和 background-color 在部分版本中仅对已展开的下拉列表生效，且无法稳定作用于“当前被选中的项”在折叠状态下的显示；Firefox 稍好，但依然不支持 :checked 伪类。本质是 <option></option> 渲染由操作系统控件接管，CSS 权限受限。
- 折叠时，
<select></select>显示的是自身value对应的文本，样式来自<select></select>元素本身，不是某个<option></option> - 展开时，
<option></option>样式仅在下拉弹层中起作用，且仅部分属性（如color）被尊重，background-color常被忽略或仅高亮 hover 状态 -
:checked在<option></option>上始终无效；:selected不是标准伪类，不要用
真正能改“选中项颜色”的两种可靠方式
想让用户一眼看出哪个值被选中，得绕过原生限制：
-
方案一：用 JS + 自定义下拉（推荐）
隐藏原生
<select></select>，用<div> + <code><ul></ul>模拟，所有样式完全可控。主流 UI 库（如 Select2、Choices.js、Headless UI）都这么干。关键点：
– 监听原生change事件同步值
– 把当前select.value显示在自定义触发器上，并加 class 如is-selected
– 展开后对对应<li>加 active 类，自由设background-color和color -
方案二：只美化折叠态的显示文本（简单场景）
改
<select></select>本身的样式，让它看起来“有选中感”：
– 设置background-color和color区别于未选中默认态
– 用::after伪元素画个自定义箭头，避免系统箭头干扰视觉一致性
– 注意：这不改变实际选中项的样式，只是让整个控件看起来更明确
CSS 能安全用在 option 上的属性有哪些
如果你仍需控制展开列表里的选项外观（比如深色主题下让文字可读），以下属性在多数现代浏览器中可用：
立即学习“前端免费学习笔记（深入）”；
select option {
color: #333;
font-weight: 500;
}
<p>/<em> Firefox 支持 background-color，Chrome/Edge 通常忽略 </em>/
@supports (background-color: #eee) {
select option {
background-color: #f9f9f9;
}
}-
color：基本都支持 -
font-weight/font-size：支持，但可能被系统字体策略覆盖 -
background-color：仅 Firefox 可靠；Chrome 中即使生效，也常只在 hover 时体现 -
padding、margin、border：全部无效
真正要实现“选中项高亮”，别卡在原生 <option></option> 上。要么用 JS 封装一层可控 UI，要么接受浏览器限制，把设计重心放在 <select></select> 本体的状态表达上——比如加边框阴影、切换背景色、联动标签文字变色。细节往往藏在交互反馈里，而不是死磕一个不可控的伪元素。
