Chrome/Firefox中select的appearance不起作用，因其仅控制原生渲染逻辑而非样式万能开关；Chrome v120+启用“modern”模式后appearance:none仅移除箭头，背景边框仍被强干预，Firefox则保留部分系统色，需配合background-color、color、border显式声明。
Chrome/Firefox里select的appearance为什么不起作用
因为appearance只是控制原生控件样式渲染逻辑，不是万能开关。Chrome（包括Edge）从v120起默认启用select的“modern”渲染模式，此时appearance: none仅移除下拉箭头，但背景、文字、边框仍被浏览器强干预；Firefox则更保守，appearance: none后仍保留部分系统色——这不是你写错了，是浏览器故意留的“安全阀”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须配合
background-color、color、border显式声明，不能只靠appearance - 加
padding和line-height对齐文字，否则在Windows高DPI屏上会偏移 - 用
background-image手动画一个SVG箭头，避免依赖原生下拉图标位置
select里option颜色为什么死活改不了
因为option是操作系统级控件，CSS只能影响select容器，无法穿透到下拉弹层内部——这是跨平台兼容性妥协的结果，不是bug。Chrome 124+ 开始支持option { color: red }，但仅限于非Windows系统；Windows上依然强制使用系统主题色。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃直接样式
option，改用datlist+input[list]模拟，或用JS库（如Choices.js）完全接管渲染 - 如果必须用原生
select，就接受option颜色不可控，只确保select本身视觉足够清晰 - 测试时务必在Windows + Chrome组合下验证，这是最严苛的场景
用appearance: none后下拉箭头消失但布局错乱
因为移除appearance后，浏览器不再为原生控件预留空间，但默认padding-right可能还留着旧值，导致文字顶到右边，或者自定义箭头没对齐。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 重置
padding-right: 0，再用padding-inline-end或padding-right重新分配空间 - 给
select设background-repeat: no-repeat和background-position: right 0.5rem center精确定位自定义箭头 - 加
min-width: min-content防止窄屏下文字被截断
深色模式下select颜色自动反转怎么办
某些系统（尤其是macOS）会把select的background-color强制映射到深色主题色，即使你写了background-color: #fff，它也可能变成浅灰甚至透明——这不是CSS失效，是系统级色彩策略介入。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@media (prefers-color-scheme: dark)单独覆盖颜色，并加!important提高权重（仅此处合理） - 避免用
transparent或initial做背景色，它们最容易被系统劫持 - 检查
color-scheme: light是否已加在select上，这个CSS属性能部分抑制系统接管
select，转而用可完全控制的替代方案。 
