必须同时声明input::placeholder、::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder四条规则并设opacity:1，因各浏览器支持断层：safari 14.1前仅认webkit前缀，firefox 18–50需单冒号，ie11只支持单冒号-ms前缀，漏一则对应环境回退默认灰。
直接写 ::placeholder 就能改颜色，但只写这一条，在旧版 Safari、Firefox 或 IE 里根本不会生效。
为什么 ::placeholder 常常不生效
不是语法错，而是浏览器支持有断层：Chrome 57+、Firefox 51+、Edge 79+ 原生支持 ::placeholder，但 Safari 14.1 之前只认 ::-webkit-input-placeholder；Firefox 18–50 要用单冒号的 :-moz-placeholder；IE11 只吃 :-ms-input-placeholder（注意是单冒号）。漏掉任意一个，对应浏览器里 placeholder 就还是默认灰。
- 写成
:placeholder（单冒号）或:: placeholder（带空格）——完全无效 - 没显式声明
color，只靠继承——Firefox 默认不继承，文字照样发灰 - 用了 UI 框架（如 Element Plus），真实 input 被包裹在
.el-input__inner里，input::placeholder选择器根本匹配不到
兼容写法必须包含哪些规则
现代项目仍需兼顾部分旧环境（比如企业内网还在跑 Safari 13 或 IE11），推荐把这几条都写上，顺序不关键，但建议标准写法放前面：
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
color: #999;
opacity: 1;
}
-
::-moz-placeholder必须配opacity: 1，否则 Firefox 默认加了 0.54 透明度，再深的color也显不出来 -
:-ms-input-placeholder是 IE11 唯一有效入口，双冒号写法在这里会失效 - 如果用 PostCSS，开
autoprefixer并启用supports和placeholder特性，能自动补全
深色模式下 placeholder 看不清怎么办
::placeholder 本身不响应系统主题，得手动用媒体查询兜底：
@media (prefers-color-scheme: dark) {
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
color: #666;
}
}
- 别只靠
color: #fff—— 在深色背景上太刺眼，#666+opacity: 0.7更平衡 - 若用了 CSS 变量（如
--placeholder-color），记得在媒体查询里也重设变量值，否则变量不会自动切换 - 真机测试时注意：iOS Safari 对
prefers-color-scheme的触发时机比 Chrome 晚，可能首次加载时不生效
动态切换 placeholder 颜色只能靠 class
JavaScript 无法直接操作 ::placeholder 的样式——它不是 DOM 元素，element.style.color 对它完全没用。
- 正确做法是切换 class：
<input :class="{ 'error-field': hasError }">，然后写.error-field::placeholder { color: #f44; } - 避免在 Vue/React 模板里用
:style绑定 placeholder 样式，那行不通 - 某些组件库（如 Ant Design）会重置 placeholder，得提高选择器权重，比如
.ant-input-affix-wrapper .ant-input::placeholder
最易被忽略的是：placeholder 文字被截断或垂直偏移，往往不是伪元素问题，而是 input 自身的 padding、line-height 和字体尺寸没对齐。改颜色前，先确保输入框基础排版稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
