firefox中::placeholder样式不生效的根本原因是其ua样式默认设置opacity:0.54，必须为::-moz-placeholder和:-moz-placeholder显式声明opacity:1并配合color使用，仅写标准::placeholder在firefox 52以下版本完全无效。
它在旧版 Firefox 里根本不是“实现问题”，而是默认加了 opacity: 0.54 —— 你写的 color 看起来发灰，不是没生效，是被这个隐藏的透明度压住了。
Firefox 必须显式写 ::-moz-placeholder 和 :-moz-placeholder
标准的 ::placeholder 在 Firefox 52+ 才支持，而大量线上项目仍需兼容 Firefox 38–51。只写 ::placeholder，旧版会直接跳过整条规则，fallback 到浏览器默认的浅灰色占位符。
- 必须同时声明两个前缀版本：
::-moz-placeholder（Firefox 19+）和:-moz-placeholder（Firefox 18–19，单冒号） - 漏掉任意一个，对应版本就会回退到 UA 默认样式
- 别指望 Autoprefixer 自动补全 —— 它不处理
::-moz-placeholder，这是 Firefox 特有语法，不是标准前缀
opacity: 1 不是可选，是必须
Firefox 的 UA 样式给 ::-moz-placeholder 硬编码了 opacity: 0.54。这个值不会被 color 覆盖，也不会继承父级 opacity，你写 color: #333 没用，最终渲染出来还是半透明的灰。
- 每个前缀版本都得配
opacity: 1，且必须和color写在同一声明块里 -
!important不是必须，但能防住某些 UI 框架（如 Element UI）全局重置规则意外覆盖 - 测试时别只看 DevTools 的 “Styles” 面板，要切到 “Computed”，搜
opacity，确认最终计算值真是1
组件库里的 ::placeholder 更容易失效
像 Element UI、Ant Design 这类库，把原生 <input> 封在内部节点里（比如 .el-input__inner），直接写 input::placeholder 根本不命中。
- 得精准穿透到实际输入框：例如
.el-input__inner::placeholder、.el-input__inner::-moz-placeholder、.el-input__inner::-webkit-input-placeholder - 每个前缀版本都要单独写
opacity: 1，尤其.el-input__inner::-moz-placeholder最容易被漏掉 - 如果用了 scoped style（如 Vue），还得加
/deep/或::v-deep穿透，否则样式根本进不去子组件
真正卡住人的从来不是怎么写，而是 Firefox 默认那个 0.54 的 opacity —— 它不报错、不警告，就 quietly 把你的颜色变淡。上线前务必在 Firefox 45 或 52 真机或 BrowserStack 里点开输入框，盯着 placeholder 看三秒：是不是比设计稿浅？是不是和 Chrome 不一致？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
