必须为 ::placeholder 编写多套浏览器前缀样式，因 safari 15.3 及更早、ie 10–11 等旧版本不支持标准双冒号写法，且框架 scoped 机制和 safari 的 opacity 敏感性易导致样式失效。
::placeholder 样式必须写多套前缀，只写标准写法在 Safari 15.3 及更早、IE 10–11、旧 Edge 和部分 Android WebView 中完全不生效。
为什么只写 ::placeholder 在 Safari 或 IE 里没反应
不是代码错了，是浏览器压根不认识这个选择器。Safari 15.4 才开始支持标准双冒号写法；IE 10–11 只认 ::-ms-input-placeholder；Firefox 18–19 要用单冒号的 ::-moz-placeholder；Chrome 49–56 和旧 Safari 则依赖 ::-webkit-input-placeholder。
常见错误现象：
- DevTools 里看到
::placeholder规则被划掉，且“Computed”面板搜不到任何 placeholder 相关样式 - 全局用了
* { all: unset; }或input { appearance: none; }，直接清掉了伪元素渲染通道 - Vue 的
<style scoped></style>或 React CSS Modules 下，input::placeholder被自动加了属性选择器，但浏览器不支持带属性匹配伪元素
怎么写才真正兼容所有主流环境
必须分开声明，不能用逗号合并（否则旧引擎会整条规则失效），顺序建议从私有前缀到标准写法：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
input::-webkit-input-placeholder { color: #999; opacity: 1; }
input::-moz-placeholder { color: #999; opacity: 1; }
input:-ms-input-placeholder { color: #999; }
input:-moz-placeholder { color: #999; }
input::placeholder { color: #999; opacity: 1; }
关键细节：
-
::-moz-placeholder和:-moz-placeholder都要写，前者对应 Firefox 20+，后者覆盖 4–18 - Safari 对
opacity极其敏感：不设opacity: 1，哪怕写了color，文字也可能发虚甚至不可见 -
line-height必须显式设为normal或匹配 input 自身值，否则 Safari 容易把 placeholder 文字压到顶部 - 避免用
rgba()控制透明度——Safari 会忽略 alpha 通道对 placeholder 的影响
Vue/React 里样式穿透怎么写
框架的 scoped 或模块化机制天然隔离伪元素，不穿透就等于没写：
- Vue 单文件组件中，必须用
:deep(input::placeholder)，不能写成:deep(input)::placeholder（后者无效） - React + CSS Modules 下，得用
:global(input::placeholder)包裹整条规则 - Ant Design、Element Plus 等 UI 库常重置
input的全局样式，比如input { color: #333; }，会意外覆盖::placeholder的继承链，建议在目标 input 上加color: inherit;补救
Android 4.4 或 IE9 怎么办
这些环境连前缀都不支持，::placeholder 所有变体全部失效：
- 先用脚本检测：
'placeholder' in document.createElement('input') - 不支持时，用 JS 模拟：blur 时设
value为提示文字 +color: #999，focus 时清空并恢复黑色 - 或者用绝对定位
span覆盖在 input 上（注意 focus/blur 同步显隐，且要处理 resize 和 zoom） - 别试图用 CSS 变量动态控制——
::placeholder不继承父级style里的变量，必须在:root或同级作用域定义并显式调用var(--placeholder-color)
最麻烦的不是写多少行前缀，而是 Safari 对 opacity 的保守处理和框架 scoped 机制对伪元素的天然屏蔽——这两点漏掉一个，样式就断在真实用户手里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
