现代浏览器推荐用::placeholder改占位符颜色，仅支持color、opacity等有限样式；Firefox需额外加::-moz-placeholder兼容。
Chrome / Edge / Safari 中用 ::placeholder 改颜色
现代浏览器（Chromium 内核和 WebKit）统一支持 ::placeholder 伪元素，这是最简洁、推荐的写法。注意它只作用于 <input> 和 <textarea> 的原生占位文字，且必须配合 color、opacity 等有限样式属性使用。
常见错误是直接写 input::placeholder 却没加具体样式，或误以为能改字体大小/行高——这些在多数浏览器里会被忽略。
input::placeholder {
color: #999;
opacity: 1; /* 防止 Safari 默认降为 0.53 */
}Firefox 需要额外加 ::-moz-placeholder
Firefox 旧版本（::-moz-placeholder，新版本虽已支持 ::placeholder，但为了兼容性，建议同时声明。两者规则会叠加，所以写法要一致，否则容易出现颜色不统一。
- 单独写
::-moz-placeholder时，opacity行为和 Chrome 不同：它会影响整个伪元素透明度，而不仅是文字 - 如果只设
color没设opacity，Firefox 可能仍显示偏灰（因默认 opacity=0.54） - 不要用
:-moz-placeholder（单冒号），那是已废弃的旧语法
input::placeholder,
input::-moz-placeholder {
color: #666;
opacity: 1;
}IE10–11 必须用 ::-ms-input-placeholder
IE 完全不认 ::placeholder，必须用微软私有伪类 ::-ms-input-placeholder。它只对 <input> 生效，<textarea> 需单独写（但 IE11 中 <textarea> 的 placeholder 本身支持度就很差）。
立即学习“前端免费学习笔记（深入）”；
IE 的 opacity 表现更不稳定，有时设了也不生效，优先靠 color 控制；另外，IE 不支持在 ::-ms-input-placeholder 里用 CSS 变量。
input::placeholder,
input::-moz-placeholder,
input::-ms-input-placeholder {
color: #777;
opacity: 1;
}为什么不能用 class 或全局覆盖？
::placeholder 是伪元素，无法通过添加 class 到 input 上来切换样式——它不响应 class 的动态增删，也不继承父级 color。想实现“聚焦时 placeholder 变色”，只能靠 JS 监听 focus/blur 手动切 class，再配对应规则：
input.placeholder-hidden::placeholder {
color: transparent;
}
input:focus::placeholder {
color: #ccc;
}但要注意：Safari 在 focus 状态下仍可能强制重置 opacity，所以 opacity: 1 最好始终显式声明。真正难搞的是多语言输入法（如中文 IME）激活时 placeholder 的闪动问题——目前无完美解，能接受就忽略，不能接受就得用 JS 模拟 placeholder 行为。
