select 的 color 样式常不生效，因原生下拉由系统控件渲染，color 仅影响收起态选中项；option 的 color 仅 firefox 支持，chrome/safari/edge 均无视；跨浏览器可控方案为自定义下拉或接受收起态有限样式。
select 元素的 color 样式为什么经常不生效
直接对 <select></select> 设置 color 在多数浏览器（尤其是 Chrome 和 Edge）中会被忽略，因为原生下拉框的文本渲染由操作系统控件接管，CSS 的 color 只能影响“未展开时的选中项”，而展开后的下拉列表项（<option></option>）默认继承系统主题色，无法用常规 CSS 控制文字颜色。
给 option 设置 color 的兼容性现实
只有 Firefox 支持对 <option></option> 单独设置 color；Chrome、Safari、Edge 均无视该声明。这意味着下面这段代码在 Firefox 中有效，在其他主流浏览器中完全无效：
<select> <option style="color: #e74c3c;">错误选项</option> <option style="color: #27ae60;">正确选项</option> </select>
所以不要依赖 option { color: ... } 实现跨浏览器一致的文字着色。
真正可控的两种方案：自定义下拉 or 限定场景 hack
如果必须精确控制文字颜色，只有两个务实路径：
立即学习“前端免费学习笔记（深入）”；
- 用 JavaScript + DOM 模拟下拉（如基于
<div> + <code><ul></ul>），完全接管样式，可自由设置color、background、圆角等 —— 适合需要深度定制或已引入 UI 库（如 Element Plus、Ant Design）的项目 - 若坚持用原生
<select></select>，只能通过以下方式有限干预：- 对
<select></select>设置color和background，仅影响收起状态的显示（且部分浏览器仍会覆盖） - 利用
:focus或:valid等伪类做状态反馈，比如选中后变色：select:focus { color: #3498db; } - 配合
appearance: none隐藏原生箭头，再用::after伪元素画一个可着色的图标 —— 但文字色依然受限于option
移动端 iOS Safari 的特殊限制
iOS 上的
<select></select>会强制调用系统原生选择器（滚轮式），所有 CSS 样式（包括color、font-size、甚至height）在展开态下全部失效。此时连appearance: none也无意义。唯一办法是检测navigator.platform.match(/iPhone|iPad/)后降级为按钮 + 弹层列表，或使用<input type="radio">+ label 模拟单选。别在
option上浪费时间写color，它在大多数浏览器里只是摆设。真要颜色可控，就得放弃原生下拉框，或者接受「只收起态可调色」这个边界。 - 对
