chrome继承color、firefox默认opacity:0.54、safari解析rgba()不稳定，需同时声明input::-webkit-input-placeholder、::-moz-placeholder、::-ms-input-placeholder和::placeholder四条规则，每条均显式设置color与opacity:1。
为什么::placeholder颜色在Chrome、Firefox、Safari里看起来不一样？
不是你写错了，是浏览器对::placeholder的默认处理根本不同：Chrome 默认继承 input 的 color，Firefox 默认加了 opacity: 0.54，Safari 对 rgba() 里的 alpha 解析不稳定，尤其在深色模式下。同一行 color: rgba(153, 153, 153, 0.6) 在 Safari 可能变成全黑或完全透明。
必须写的四条前缀规则，顺序不能错
只写 input::placeholder 会漏掉 Safari 14.0、Firefox 50、旧 Edge —— 它们根本不认这个标准写法。四条规则缺一不可，且必须按兼容性从低到高排列：
-
input::-webkit-input-placeholder（Safari ≤14.0、Chrome ≤56） -
input::-moz-placeholder（Firefox 19–50；注意是双冒号，单冒号:-moz-placeholder已淘汰） -
input::-ms-input-placeholder（IE10–11、EdgeHTML） -
input::placeholder（现代标准，放最后，否则会被前面覆盖）
每条都得显式声明 color 和 opacity: 1，不能省略。
Firefox 的 opacity 是个硬坑，别绕开它
哪怕你只写了 color: #999，Firefox 也会偷偷叠加 opacity: 0.54，结果文字发灰。光写 opacity: 1 还不够——某些老版本 Firefox（如 47）连这个都不认。所以必须：
- 在每条前缀规则里都带上
opacity: 1 - 别用
rgba(153, 153, 153, 0.6)模拟半透明，改用color: #999; opacity: 0.6 - 避免
inherit或currentcolor做color值，Safari 可能继承 border 色导致文字“隐形”
框架或重置样式悄悄覆盖了你的规则？这样查
本地正常、上线变黑/消失，八成是外部 CSS 在捣鬼。DevTools 里点开 ::placeholder，看哪些规则被划掉（strike-through）：
- 检查是否被
*::placeholder或normalize.css里的兜底规则覆盖 - UI 框架（如 Ant Design）常设
opacity: 0.5，得用更高权重覆盖，比如.my-form input::placeholder - 别用
all: unset或all: initial作用于input，它们会清空伪元素样式 - Vue 的
<style scoped></style>会让::placeholder失效，得用:deep(input::placeholder)
真正麻烦的从来不是写几行 CSS，而是浏览器各自为政的默认行为 + 框架暗中插手的样式重置——这两块不盯死，颜色永远 unpredictable。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
