select 的 color 样式常不生效，因原生下拉由系统控件渲染，color 仅影响收起态选中项；option 的 color 仅 Firefox 支持，Chrome/Safari/Edge 均无视；跨浏览器可控方案为自定义下拉或接受收起态有限样式。

select 元素的 color 样式为什么经常不生效

直接对 <select> 设置 color 在多数浏览器（尤其是 Chrome 和 Edge）中会被忽略，因为原生下拉框的文本渲染由操作系统控件接管，CSS 的 color 只能影响“未展开时的选中项”，而展开后的下拉列表项（<option>）默认继承系统主题色，无法用常规 CSS 控制文字颜色。

给 option 设置 color 的兼容性现实

只有 Firefox 支持对 <option> 单独设置 color；Chrome、Safari、Edge 均无视该声明。这意味着下面这段代码在 Firefox 中有效，在其他主流浏览器中完全无效：

<select>
  <option style="color: #e74c3c;">错误选项</option>
  <option style="color: #27ae60;">正确选项</option>
</select>

所以不要依赖 option { color: ... } 实现跨浏览器一致的文字着色。

真正可控的两种方案：自定义下拉 or 限定场景 hack

如果必须精确控制文字颜色，只有两个务实路径：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

立即学习“前端免费学习笔记（深入）”；

• 用 JavaScript + DOM 模拟下拉（如基于 <div> + <ul>），完全接管样式，可自由设置 color、background、圆角等 —— 适合需要深度定制或已引入 UI 库（如 Element Plus、Ant Design）的项目
• 若坚持用原生 <select>，只能通过以下方式有限干预：
  • 对 <select> 设置 color 和 background，仅影响收起状态的显示（且部分浏览器仍会覆盖）
  • 利用 :focus 或 :valid 等伪类做状态反馈，比如选中后变色：select:focus { color: #3498db; }
  • 配合 appearance: none 隐藏原生箭头，再用 ::after 伪元素画一个可着色的图标 —— 但文字色依然受限于 option

移动端 iOS Safari 的特殊限制

iOS 上的 <select> 会强制调用系统原生选择器（滚轮式），所有 CSS 样式（包括 color、font-size、甚至 height）在展开态下全部失效。此时连 appearance: none 也无意义。唯一办法是检测 navigator.platform.match(/iPhone|iPad/) 后降级为按钮 + 弹层列表，或使用 <input type="radio"> + label 模拟单选。

别在 option 上浪费时间写 color，它在大多数浏览器里只是摆设。真要颜色可控，就得放弃原生下拉框，或者接受「只收起态可调色」这个边界。