要解决 placeholder 文字颜色被覆盖问题，需用更具体选择器（如 .form-control::placeholder）提升权重，并补充浏览器前缀及显式设置 opacity:1 和 font-size 等属性。
placeholder 文字颜色被 input 文本样式覆盖
直接给
设颜色却没生效？大概率是父级或全局的
文本颜色规则权重更高，比如
会“穿透”影响 placeholder 的渲染（尤其在旧版 Safari 和部分 Chrome 版本中）。
本身优先级并不高，不是加个
就能一劳永逸——它可能被更具体的 selector 压制。
用更具体的选择器提升 ::placeholder 权重
别只写
，把它嵌套进已有 class 或 id 中，让选择器 specificity 显著提高：
这样比
多出 10+ 点权重（class 算 10，id 算 100），基本能压过大多数通用
规则。如果页面里用了 BEM 或类似命名规范，直接复用现有 class 是最稳妥的做法。
注意
浏览器
前缀与
伪元素
写法差异
老版本浏览器对
支持不一致，且有的只认单冒号
。虽然现代项目可忽略 IE，但 Safari 14.1 之前、Firefox 51 之前仍需兼容：
立即学习
“
前端免费学习笔记（深入）
”；
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
（Chrome/Safari/Edge）
（Firefox 19–51，透明度失效）
（IE10–11）
（标准，推荐放在最后兜底）
所有变体必须单独写，不能合并成逗号分隔列表——否则任意一个语法错误会导致整条规则失效。
color 以外的属性也受父级继承影响
除了颜色，
、
、
等若未显式声明，会继承自
元素本身。而某些 UI 框架（如 Bootstrap）会给
设
，但 placeholder 又被设为
，结果视觉上文字偏小又发虚。建议统一控制：
opacity 是个关键点：Firefox 默认把 placeholder 降为半透明，不设
就算颜色设对了，看起来还是灰蒙蒙的。
input::placeholderinputinput { color: #333; }::placeholder!important::placeholder.form-control::placeholder {
color: #999;
}
search-input::placeholder {
color: #aaa;
}
input::placeholderinput::placeholder:placeholderinput::-webkit-input-placeholderinput::-moz-placeholderinput::-ms-input-placeholderinput::placeholderfont-sizefont-familyline-heightinputinputfont-size: 1rem0.875rem.input-field::placeholder {
color: #aaa;
font-size: 1rem; /* 显式重置 */
opacity: 1; /* 防止 Firefox 默认 0.53 */
}opacity: 1