必须显式设置 opacity 才能确保 ::placeholder 颜色可见且一致，因各浏览器对透明度处理不同：firefox 默认 opacity: 0.54，safari 可能忽略 rgba 的 alpha，chrome 也有内部叠加，故 color 与 opacity 必须成对出现，如 color: #999; opacity: 1;
为什么只写 color 会导致占位符颜色“看不见”或“发虚”
Firefox 默认给 ::placeholder 设了 opacity: 0.54，Chrome 某些版本也会叠加内部透明度，Safari（尤其 iOS 15+）对 alpha 通道极其保守——哪怕你用 rgba(0,0,0,0.6)，它也可能直接忽略 alpha、只按灰度渲染，甚至让文字完全不可见。这不是 bug，是各引擎对伪元素渲染通道的实现差异。
所以单设 color 不够，必须显式控制 opacity，且值要明确为 1 或你需要的数值（比如 0.7），不能依赖继承或默认。
::placeholder 的 opacity 和 color 必须成对出现
以下写法是安全且可预测的：
input::placeholder {
color: #999;
opacity: 1;
}
关键点：
-
opacity: 1是重置 Firefox 默认半透明的最简方式，不是“可选” - 别用
color: rgba(0,0,0,0.7)代替opacity：Safari 会丢弃 alpha，最终显示为不透明黑字 - 如果真要浅色文字（比如深背景上），优先调
color值（如#ccc），再配opacity: 1，而不是靠降低 opacity 去压暗 -
opacity支持小数（0.65），但过渡动画中建议不超过0.2s，否则用户会看到残留
聚焦时让占位符立即变透明，别用 display: none
原生 placeholder 在 focus 时不会自动隐藏，得靠 CSS 强制控制。正确做法是：
input:focus::placeholder {
opacity: 0;
transition: opacity 0.15s;
}
原因：
-
display: none在部分旧 Safari 和 Android WebView 中不被支持，还会触发重排 -
color: transparent不可靠：某些浏览器会把 transparent 当作黑色 + 0 透明度，反而更刺眼 - 必须单独写
textarea:focus::placeholder，因为textarea和input是不同选择器 - 过渡时间超过
0.2s，用户可能在输入前看到一闪而过的提示文字
兼容老浏览器时，opacity 要在每套前缀里重复声明
PostCSS 不会帮你补全伪元素的 opacity，必须手写四份：
input::placeholder { color: #999; opacity: 1; }
input::-webkit-input-placeholder { color: #999; opacity: 1; }
input::-moz-placeholder { color: #999; opacity: 1; }
input:-ms-input-placeholder { color: #999; opacity: 1; }
注意：
- 不能合并成逗号分隔选择器（如
input::placeholder, input::-webkit-input-placeholder），旧引擎会整条规则失效 -
:-ms-input-placeholder（IE11）只认单冒号，写双冒号会被忽略 - Safari 14.0 及更早必须用
::-webkit-input-placeholder，标准::placeholder完全无效 - Android 4.4 WebView 不支持任何
::placeholder变体，此时只能 JS 模拟
真正麻烦的不是写法多，而是每套前缀都要独立验证 opacity 是否生效——DevTools 里看不到报错，它只是静默不渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
