必须同时声明input::placeholder、::-webkit-input-placeholder、::-moz-placeholder、::-ms-input-placeholder四个选择器，标准写法放最后；firefox需显式设opacity:1，safari禁用rgba()调透明度，且仅支持color等有限文本属性。
直接写 ::placeholder 在多数现代浏览器里能用，但只要项目要支持 Safari 15.3、Firefox 50 或旧版 Edge，就一定会漏样式——不是颜色不生效，就是透明度被强制压暗，甚至整个 placeholder 消失。
必须同时声明四个前缀选择器
Chrome/Safari 用 ::-webkit-input-placeholder，Firefox 51+ 用 ::-moz-placeholder（注意双冒号），IE10–11 和旧 EdgeHTML 用 ::-ms-input-placeholder，而标准写法 ::placeholder 必须放在最后，否则会被前面带前缀的规则覆盖。
- 别只写
input::placeholder—— Safari 14、Firefox 49 会完全忽略 -
::-moz-placeholder和:-moz-placeholder（单冒号）是两回事：后者只在 Firefox 18–19 有效，现在基本可不写 - 如果项目还要兼容 iOS Safari 16–16.3，
::-webkit-input-placeholder不能省，它比标准语法更稳
Firefox 的 opacity 是个陷阱
Firefox 默认给 ::-moz-placeholder 加了 opacity: 0.54，哪怕你只设了 color，最终颜色也会变浅。光写 opacity: 1 不够，有些老版本连这个都不认。
- 必须显式写
opacity: 1，且放在每条前缀规则里 - 别依赖
rgba()控制透明度来绕过——Safari 对 rgba() 中 alpha 的解析不稳定，尤其在深色模式下 - 如果设计稿要求“#999 + 60% 透明”，不要写
color: rgba(153, 153, 153, 0.6)，改用color: #999; opacity: 0.6并确认所有前缀都带上
哪些 CSS 属性真能用，哪些只是幻觉
::placeholder 不是普通元素，它只接受有限的文本类样式，盒模型、背景、滤镜等一概无效。而且不同浏览器支持程度还不同。
- 安全可用：
color、font-size、font-weight、line-height、text-transform、opacity - 慎用：
font-style（Safari 有时失效）、text-align（Firefox 不稳定） - 根本别试：
background、border、padding、margin、transform、filter - 绝对别用
inherit或currentcolor做color值——Safari 可能继承 input 的 border 色，导致文字“隐形”
框架或重置样式干扰时怎么排查
常见现象是：本地开发正常，上线后 placeholder 突然变黑、消失或颜色错乱。大概率是外部 CSS 把你的规则盖掉了。
- 打开 DevTools，在 Computed 面板里点开
::placeholder，看哪条规则生效——经常是某条泛用的*::placeholder或 normalize.css 里的兜底规则在作怪 - Tailwind 用户注意：
placeholder-gray-400类会生成带前缀的规则，但如果项目里又手动写了input::placeholder，优先级可能翻车 - CSS-in-JS（如 Styled-components）中，动态 class 名会打散作用域，得确保 placeholder 规则也进了同一 scope，否则照样不生效
真正麻烦的从来不是写几行兼容代码，而是当它在某个 Safari 15.2 的 iPad 上突然不显示时，你得想起它根本不认 ::placeholder，而 ::-webkit-input-placeholder 又被父级 opacity 继承压成了 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
