直接写::placeholder会漏样式，因为Safari 15.3、Firefox 50、旧EdgeHTML等仍在线版本不支持该标准语法，仅识别带前缀的写法；必须按顺序声明::-webkit-input-placeholder、::-moz-placeholder、::-ms-input-placeholder及最后的::placeholder四套规则，且每条均需显式设置opacity:1并避免rgba()，同时仅使用color、font-size等有限文本属性。
为什么直接写 ::placeholder 会漏样式？
因为 Safari 15.3、Firefox 50、旧 EdgeHTML 这些仍在线上运行的版本根本不认 ::placeholder。它们只响应带前缀的写法，而且顺序错了还会覆盖——比如把 ::-webkit-input-placeholder 放最后，Chrome 就会用它覆盖标准规则。
必须按顺序声明四套规则：::-webkit-input-placeholder（Chrome/Safari）、::-moz-placeholder（Firefox 51+）、::-ms-input-placeholder（IE10–11/EdgeHTML），::placeholder 放在最末。漏掉任意一套，对应浏览器里 placeholder 就是默认灰、变浅、或直接消失。
Firefox 的 opacity 是个隐藏陷阱
Firefox 默认给 ::-moz-placeholder 加了 opacity: 0.54，哪怕你只写了 color: #666，最终效果也是半透明的灰字，和设计稿对不上。
- 必须每条前缀规则里都显式写
opacity: 1，不能只写在::placeholder里 - 别用
rgba(102, 102, 102, 0.6)想绕过——Safari 对 alpha 解析不稳定，深色模式下尤其容易失效 - 真要实现“#666 + 60% 透明”，得统一写成
color: #666; opacity: 0.6，且四套规则全都要带上
::placeholder 能用哪些 CSS 属性？
它不是普通元素，不支持盒模型、背景、滤镜这些。不同浏览器还各自砍一刀，稍不注意就白写。
- 安全可用：
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 色，文字直接“隐形”
IE9 及更老浏览器怎么兜底？
它们连 placeholder 属性都不解析，CSS 伪元素更没戏。这时候只能靠 JS 模拟，但要注意两个关键点：
- 不要只监听
onfocus/onblur：IE9 下 focus 事件触发时机异常，得配合oninput和定时检测值变化 - label 模拟方案要加
pointer-events: none，否则 label 会挡住 input 的点击区域 - 动态插入的 placeholder 文本必须设
user-select: none，不然用户可能误选中它
真正麻烦的不是写几行 JS，而是确保它和原生 placeholder 的行为节奏一致——比如 Safari 是 focus 即消失，Chrome 是输入才消失，JS 版得按 UA 切换逻辑，否则表单体验割裂感极强。
