firefox 默认为 ::placeholder 设置 opacity: 0.54，即使只声明 color 也会变淡，需显式设置 opacity: 1 才生效；chrome/safari/edge 默认 opacity: 1，仅设 color 即可；ie11 和旧版 ios safari 不支持 opacity 作用于 placeholder，应优先使用 rgba() 控制明度，并确保选择器权重足够。
Firefox 默认会给 ::placeholder 加上 opacity: 0.54，哪怕你只写了 color，它也会变淡——这不是 bug，是 Firefox 的默认行为。必须显式写 opacity: 1 才能真正生效。
为什么 Firefox 中 placeholder 颜色总比 Chrome 浅
Firefox 从早期版本起就对 placeholder 文本强制应用半透明效果，且这个 opacity 不继承自父元素，也不受 color 值影响。即使你设了 color: #666，最终渲染出来的视觉亮度接近 #999。开发者工具里能看到 computed 样式中 opacity 被锁定为 0.54，且没有被你的规则覆盖。
- Chrome/Safari/Edge：
opacity默认为 1，只改color就够 - Firefox（19+）：默认
opacity: 0.54，必须用opacity: 1覆盖 - IE11/Edge ≤18：不支持
opacity作用于 placeholder，但支持color，所以优先用rgba()控制明度
必须同时声明 ::placeholder 和 :-moz-placeholder
只写 input::placeholder { opacity: 1; } 在 Firefox 里可能无效，因为旧版规则（:-moz-placeholder）仍被解析，且层叠顺序可能导致标准写法被忽略。要确保所有路径都被覆盖：
-
input::-moz-placeholder是 Firefox 18–19 的单冒号语法，必须保留 -
input::placeholder放在最后，避免被前面的规则意外覆盖 - 不要省略
input::-webkit-input-placeholder和input::-ms-input-placeholder，尤其项目需兼容 IE11 或旧 Edge
推荐写法：
input::-webkit-input-placeholder { color: #999; opacity: 1; }
input::-moz-placeholder { color: #999; opacity: 1; }
input:-ms-input-placeholder { color: #999; }
input::placeholder { color: #999; opacity: 1; }
opacity: 1 不是万能解，IE11 和 iOS Safari 有例外
opacity 在 IE11 和部分 iOS Safari 版本中对 placeholder 完全无效，甚至会导致文字消失。此时靠 opacity 没用，得换思路：
- IE11 必须用
input::-ms-input-placeholder单独写color，且避免用opacity - iOS Safari（尤其是 15.4 之前）会强制缩小 placeholder 字体，
font-size可能被忽略，建议用color+letter-spacing微调可读性 - 如果要用透明度控制浅灰效果，优先选
rgba(153, 153, 153, 0.7)而非#999+opacity，前者在所有浏览器中行为一致
真正容易被忽略的点是：就算你写了 opacity: 1，如果选择器权重不够（比如被全局 *::placeholder { color: transparent; } 覆盖），它照样不生效。打开开发者工具，盯着 ::placeholder 规则是否被划掉，比反复试颜色更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
