<p>必须为 input 和 textarea 显式声明所有浏览器前缀的 placeholder 伪元素规则，且 Firefox 需强制设置 opacity: 1，否则文字发灰；WebKit 要求顶层选择器，Safari 深色模式下推荐用 color + opacity 替代 rgba()，IE9- 需 JS 模拟。</p>
直接写 ::placeholder 在现代浏览器里能跑，但只要项目要上线、要测 iOS Safari 16.3 或 Firefox 50，就必须手动补全全部前缀规则——漏一条，placeholder 就可能变黑、消失，或颜色错乱。
textarea 的 placeholder 伪元素和 input 完全等价吗？
等价，但容易被忽略的是：所有前缀规则都必须同时作用于 input 和 textarea。只写 input::placeholder，textarea 在旧版 Firefox 或 EdgeHTML 下会完全不生效。
-
textarea::-webkit-input-placeholder必须显式声明，Safari 14–16.3 不认textarea::placeholder -
textarea::-moz-placeholder要带opacity: 1，否则 Firefox 默认压暗到 0.54，哪怕你设了color: #999，实际也是灰蒙蒙的 -
textarea:-ms-input-placeholder在 IE11 和旧 Edge 中仍需保留，不能省；它和input共享同一套解析逻辑，但选择器不写textarea就不匹配
为什么写了 ::-webkit-input-placeholder 还是没效果？
常见原因是规则被覆盖或语法错位。WebKit 内核（Chrome/Safari）对伪元素顺序敏感，且部分版本不支持嵌套选择器。
- 不要写成
.form-group input::-webkit-input-placeholder—— 多数 Safari 15.3 及更早版本只认顶层标签选择器，比如input::-webkit-input-placeholder或textarea::-webkit-input-placeholder - 确保
::-webkit-input-placeholder规则没有被更高优先级的全局重置样式（如 normalize.css 或 antd/reset）覆盖，可用浏览器 DevTools 的“Computed”面板看最终生效值 - Safari 对
rgba()中 alpha 值解析不稳定，尤其深色模式下；改用color: #666; opacity: 0.7更可靠
IE9 及更老浏览器怎么 fallback？
原生 placeholder 属性在 IE9– 及部分 Android 4.x 浏览器中根本不存在，CSS 伪元素也无效，必须用 JS 模拟。
- 检测方式用
'placeholder' in document.createElement('input')，别依赖 User Agent 字符串 - 对
type="password"要单独处理：不能直接设value（会暴露明文），得用两个 DOM 元素切换（一个text显示提示，一个password接收输入） - 监听
focus/blur时同步控制 visibility，避免用户点击后 placeholder 文字残留；注意移动端click事件延迟可能导致闪烁
最易被忽略的点是：Firefox 的 opacity 行为不是“可选优化”，而是强制干预项；哪怕你只改颜色，也得每条前缀规则里都写 opacity: 1，否则上线后 QA 一定会报“iOS 正常，Firefox 文字发灰”。
