只写::placeholder会漏样式，因Safari 15.3及更早、Firefox 49–50、IE11等存量浏览器不支持该标准语法，仅识别带前缀的写法；必须按顺序声明::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder及::placeholder四套规则，且每条均需显式设置opacity:1并避免rgba()。
只写 ::placeholder 会漏掉 Safari 14–15.3、Firefox 49–50、IE11 等真实存量环境，必须四套前缀全写，且 ::placeholder 放最后。
为什么 ::placeholder 单独写不生效
现代浏览器（Chrome 57+、Firefox 51+、Edge 79+）确实支持 ::placeholder，但 Safari 15.3 及更早版本完全忽略它；Firefox 49–50 只认 ::-moz-placeholder；IE11 则只响应 :-ms-input-placeholder（注意是单冒号）。DevTools 里看到规则被划掉，大概率不是你写错了，而是浏览器压根不解析这条选择器。
常见错误包括：
- 漏掉
input或textarea前缀，直接写::placeholder—— 多数浏览器要求限定元素上下文 - 把
::placeholder写在最前面，结果被后面带前缀的规则覆盖（CSS 层叠顺序从上到下） - 用了
:placeholder（单冒号）或:: placeholder（空格），语法错误导致整条失效
::-moz-placeholder 必须显式加 opacity: 1
Firefox 默认给 ::-moz-placeholder 加了 opacity: 0.54，哪怕你只设了 color: #999，最终文字也会发灰、变浅。这不是渲染偏差，是浏览器硬编码的行为。
立即学习“前端免费学习笔记（深入）”；
解决办法很简单：每一条 ::-moz-placeholder 规则里都带上 opacity: 1，不能省略，也不能只写在 ::placeholder 里。
另外注意：
- 老版 Firefox（如 50）不支持
opacity属性，但写了不会报错，只是不生效；不写则一定失效 - 别用
rgba()想绕过 —— Safari 对 alpha 解析不稳定，深色模式下可能直接变黑或隐形 - 绝对别用
inherit或currentcolor做color值，Safari 有时会继承 input 的 border 色，导致文字“消失”
::-webkit-input-placeholder 在 Safari 中的透明度陷阱
Safari（尤其是 iOS 16.3 及更早）不支持 rgba() 的 alpha 通道用于 color，写 color: rgba(153, 153, 153, 0.6) 很可能被忽略，或者在深色模式下异常渲染。
正确做法是拆开：color: #999 + opacity: 0.6，并且确保这个 opacity 同时出现在所有前缀规则中，包括 ::-webkit-input-placeholder。
其他 Safari 注意点：
-
text-align表现不稳定，建议避免依赖 -
line-height若未显式设置，容易和 input 自身的行高冲突，导致文字偏顶或截断；推荐写line-height: normal或匹配父级 -
font-style: italic在部分 Safari 版本中会失效，不如用font-weight或颜色做弱提示
哪些 CSS 属性真能用，哪些只是幻觉
::placeholder 不是真实 DOM 元素，而是渲染层的文本投影，只接受有限的文本类样式，盒模型、背景、滤镜等一律无效，而且各浏览器支持程度还不一致。
可安全使用：
-
color、font-size、font-family、font-weight -
opacity（比调color更可控，尤其对“弱提示”语义） -
line-height（需配合padding微调垂直居中）
慎用或不稳定：
-
font-style（Safari 有时失效） -
text-align（Firefox 表现不一致）
绝对别试：
-
background、border、padding、margin、transform、filter -
display、width、height—— 浏览器静默忽略，不报错也不渲染
本地看着好好的，上线后 placeholder 颜色错、变黑或消失，八成是某条全局样式（比如 UI 框架重置）覆盖了你的规则，或者忘了在所有前缀里同步 opacity 和 color 值。
