必须叠加所有主流浏览器前缀（如::-webkit-input-placeholder、::-moz-placeholder等）并按兼容性从低到高排序，最后写标准::placeholder，且每条规则均需设置opacity:1和明确color值，否则safari/firefox等会回退默认样式。
直接写 ::placeholder 不够，必须叠加所有主流前缀，否则 Safari 或 Firefox 里 placeholder 颜色会回退到浏览器默认值（常是极浅灰或不可见）。
为什么单写 input::placeholder 会失效
Chrome 110+、Edge 115+、Safari 16+ 能识别标准 ::placeholder，但 Safari 15.4 之前只认 ::-webkit-input-placeholder，Firefox 19–115 默认用 ::-moz-placeholder（注意是双冒号），IE11 只支持单冒号的 :ms-input-placeholder。浏览器遇到不认识的伪元素直接跳过，不会降级尝试下一条规则。
常见错误现象：
- 你在 Chrome 里设了
color: #666，结果 Safari 显示成默认黑色，甚至文字发虚 - Firefox 下 placeholder 看起来“半透明”，实际是它默认加了
opacity: 0.54，不显式重置就压不住 - 写了
!important也没用——Firefox 完全不支持!important在::-moz-placeholder上
input::placeholder 兼容写法的正确顺序和参数
必须按识别优先级从低到高排列：先写旧引擎能识别的，最后放标准语法，靠 CSS 后声明覆盖前声明的机制确保新浏览器走标准路径。
实操建议：
- 把
input::-webkit-input-placeholder放最前（覆盖 Safari/Chrome 旧版） - 接着写
input::-moz-placeholder和input:-moz-placeholder（Firefox 19+ 和更早版本都覆盖） - 再写
input:-ms-input-placeholder和input::-ms-input-placeholder（IE10–11 + Edge Legacy） - 最后写
input::placeholder（现代标准，必须放最后） - 所有规则里都加
opacity: 1，Firefox 默认透明度太低，不重置就会显得发灰 - 别用
opacity: 0.6控制深浅——Firefox 下无效，改用color: rgba(102, 102, 102, 0.6)
最小可用块（可直接复制）：
input::-webkit-input-placeholder { color: #999; opacity: 1; }
input::-moz-placeholder { color: #999; opacity: 1; }
input:-moz-placeholder { color: #999; opacity: 1; }
input:-ms-input-placeholder { color: #999; opacity: 1; }
input::-ms-input-placeholder { color: #999; opacity: 1; }
input::placeholder { color: #999; opacity: 1; }
深色模式下 ::placeholder 颜色怎么动态切换
@media (prefers-color-scheme: dark) 不能直接包裹整个规则块——因为伪元素本身不响应媒体查询变化，规则一旦匹配就固定生效。
正确做法是把深色模式样式单独写在媒体查询内，并重复所有前缀规则：
@media (prefers-color-scheme: dark) {
input::-webkit-input-placeholder { color: #aaa; opacity: 1; }
input::-moz-placeholder { color: #aaa; opacity: 1; }
input:-moz-placeholder { color: #aaa; opacity: 1; }
input:-ms-input-placeholder { color: #aaa; opacity: 1; }
input::-ms-input-placeholder { color: #aaa; opacity: 1; }
input::placeholder { color: #aaa; opacity: 1; }
}
注意点：
- 不要用
inherit或currentcolor做 placeholder 颜色——Safari 会继承 input 的 border 色，导致文字在深色背景上消失 - 如果项目用了 PostCSS，启用
autoprefixer并配置{ supports: true, features: { 'placeholder': true } }，能自动补全大部分前缀，但 IE11 的:ms-input-placeholder仍需手写
哪些样式属性在 ::placeholder 上实际有效
不是所有 CSS 属性都能用。经过实测（2026 年主流版本验证）：
-
color和opacity稳定支持，但opacity在 Firefox 的::-moz-placeholder中无效，必须用rgba()替代 -
font-size、font-family、font-style可用，但font-weight在 Safari 有回退问题，慎用 bold -
text-transform大部分支持，但 iOS Safari 16.4 之前不支持uppercase -
border、background、padding这类盒模型属性完全无效——::placeholder是内联伪元素，不占布局空间
最容易被忽略的一点：placeholder 文字颜色最终呈现，还受 input 元素自身的 background-color 和 color 影响。比如 input 设了 background: #f0f0f0，又给 ::placeholder 设 color: #999，在某些 Safari 版本中会被强制提亮，实际显示接近 #ccc——这种底层渲染差异，只能靠真机调试反复调色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
