最直接方式是使用::placeholder伪元素，现代浏览器（chrome 57+、firefox 51+、edge 16+）支持，需写双冒号并配合color属性；旧版safari需补::-webkit-input-placeholder；ie11须js模拟；深色模式下应配合@media (prefers-color-scheme: dark)适配。
用 CSS 伪元素改 placeholder 颜色
HTML 的 input 元素本身不提供直接设置 placeholder 颜色的属性，必须靠 CSS 伪元素。不同浏览器用的伪元素不同，主流就两个：::placeholder（标准）和 ::-webkit-input-placeholder（旧版 WebKit）。
只写 ::placeholder 在 Chrome 100+、Firefox 90+、Edge 100+ 没问题，但如果你还要兼容老版本 Chrome/Safari（比如 Electron 或内嵌 WebView 场景），就得补全前缀。
示例写法：
input::placeholder {
color: #666;
opacity: 1; /* 防止某些浏览器默认加 opacity */
}
input::-webkit-input-placeholder {
color: #666;
}
input::-moz-placeholder {
color: #666;
}
input:-ms-input-placeholder {
color: #666;
}
为什么加了样式没生效？常见原因
伪元素样式优先级低，容易被其他规则覆盖。尤其当全局写了 input { color: #333; } 这类通用样式时，::placeholder 可能被压制。
- 确保选择器足够具体，比如用
input.my-input::placeholder替代泛泛的input::placeholder - 避免用
!important，优先靠提高选择器权重解决 - 检查是否在 CSS 里误写了
:placeholder（少一个冒号），正确是::placeholder - 某些 UI 框架（如 Ant Design、Element Plus）会重置 placeholder 样式，需在它们的样式之后加载自定义规则
opacity 和 color 搭配要注意
Chrome 和 Safari 默认给 ::-webkit-input-placeholder 加了 opacity: 0.52，即使你设了 color: #999，实际看起来更淡。Firefox 则默认不加 opacity。
所以统一行为建议显式控制：
- 设
opacity: 1让颜色完全按color值显示 - 或者用
color: rgba(102, 102, 102, 0.7)直接控制透明度，比依赖 opacity 更可控 - 不要同时设
color和opacity，容易在不同浏览器中表现不一致
移动端 iOS Safari 的特殊坑
iOS 15.4+ 修复了部分 placeholder 渲染问题，但 iOS 14 及更早版本对 ::placeholder 支持不稳定，有时会忽略 font-size 或 line-height 设置。
如果项目必须支持老 iOS：
- 强制用
input::-webkit-input-placeholder覆盖所有 WebKit 行为 - 避免在 placeholder 里用
em或rem做字体大小，改用px防止缩放异常 - 真机测试比模拟器更可靠——Safari 技术预览版和旧 iPhone 真机差异很大
有些项目把 placeholder 当成“半功能输入提示”来用，结果发现颜色改了但点击后文字残留、或聚焦时过渡生硬。这类问题往往不是颜色本身，而是 placeholder 和 value 的状态切换逻辑没理清——伪元素只管显示，不管交互。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
