必须同时声明input::placeholder、::-webkit-input-placeholder、::-moz-placeholder、::-ms-input-placeholder四个选择器且标准写法放最后；firefox需显式设opacity:1，safari禁用rgba()调透明度，仅支持color等有限文本属性。
直接写 ::placeholder 在 Chrome 100+、Firefox 100+、Safari 16.4+ 里基本能用，但只要项目要上线，就必须补全前缀——漏一个，就可能在某个用户手机上 placeholder 变黑、发虚、甚至完全消失。
为什么只写 input::placeholder 会失效
不是语法错，是浏览器没认到。Chrome 57–100、Safari 14–16.3、Firefox 51–99 这些版本对标准伪元素支持不完整；IE11 和旧 EdgeHTML（Edge 18 及更早）压根不解析 ::placeholder，必须靠 ::-ms-input-placeholder 才能生效。
-
::-webkit-input-placeholder是 Safari 14–16.3 和部分 Android WebView 的唯一可靠入口 -
::-moz-placeholder（注意双冒号）在 Firefox 51–99 必须显式写，否则 opacity 默认 0.54，颜色变浅 - 把
::placeholder放在最后，否则会被前面带前缀的规则覆盖（CSS 层叠顺序）
opacity: 1 是跨浏览器一致的关键
Firefox 默认给 ::-moz-placeholder 加了 opacity: 0.54，哪怕你只设 color: #999，最终也像蒙了层灰。Safari 对 rgba() 中 alpha 通道的解析不稳定，尤其深色模式下可能直接忽略。
- 所有前缀规则里都得写
opacity: 1，不能只写在标准写法里 - 别用
color: rgba(153, 153, 153, 0.6)模拟透明度——改用color: #999; opacity: 0.6并确保四条规则都带上 -
inherit或currentcolor做color值时，Safari 可能继承 input 的 border 色，导致文字“隐形”
哪些 CSS 属性真能用，哪些只是幻觉
::placeholder 不是普通 DOM 元素，它只接受有限的文本类样式。盒模型、背景、滤镜等属性在多数浏览器里根本无效，且各浏览器支持程度不一。
- 安全可用：
color、font-size、font-weight、line-height、text-transform、opacity - 慎用：
font-style（Safari 有时失效）、text-align（Firefox 不稳定） - 根本别试：
background、border、padding、margin、transform、filter
全局重置或框架样式会悄悄干掉 placeholder
本地开发正常、上线后 placeholder 突然变黑或消失？大概率是某处写了 * { all: unset; } 或 input { appearance: none; } ——这类强重置会清掉伪元素的渲染通道。
- 用 DevTools 的 Computed 面板搜
placeholder，看样式是否显示“已禁用”或“继承自无” - 在目标
input上临时加color: inherit;，再试::placeholder，可验证是否继承链断裂 - 避免在任何地方写
::placeholder { display: none; }或content: ""，Safari 会彻底屏蔽提示文字
真正麻烦的不是写四条规则，而是每条规则里都要同步 opacity、避开 rgba()、绕开全局重置——这些细节一旦漏掉，问题只会在特定设备上爆发，很难复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
