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