::placeholder 文字颜色不显示主因是被 input 的 opacity 继承或样式覆盖，需用浏览器开发者工具检查 computed 值，并为各浏览器添加对应前缀及显式设置 opacity:1 或 rgba 颜色。
当 ::placeholder 的文字颜色没显示出来，通常不是伪元素失效，而是被 input 元素自身的 color 或 opacity 覆盖或干扰了。关键在于理解层叠顺序和透明度继承逻辑。
确保 placeholder 选择器写法正确且兼容
不同浏览器前缀仍需保留，尤其在旧版 Safari 和 Edge 中：
-
input::placeholder（标准写法） -
input::-webkit-input-placeholder（Chrome/Safari/Edge） -
input::-moz-placeholder（Firefox 19+） -
input::-ms-input-placeholder（IE10–11）
只写 ::placeholder 会导致部分浏览器完全不生效，颜色自然“消失”。
避免 input 的 color 影响 placeholder 显示
input 的 color 不会直接覆盖 placeholder，但若同时设置了 opacity，整个 input（含 placeholder）都会变淡甚至不可见——因为 ::placeholder 是 input 的子渲染内容，会继承父级 opacity。
立即学习“前端免费学习笔记（深入）”；
解决方法：不要对 input 设置 opacity，改用 background-color 的 alpha 值（如 rgba(255,255,255,0.8)）来实现半透效果；或者将 opacity: 1 显式加在 ::placeholder 上强制重置：
input::placeholder {
color: #999;
opacity: 1; /* 抵消父级 opacity 继承 */
}检查是否被其他样式意外覆盖
常见干扰源：
- 全局重置 CSS（如 normalize.css）里重设了
::placeholder的 color 为inherit或透明色 - CSS 优先级不足：比如用了类选择器
.input-field::placeholder，却被更早定义的input::placeholder覆盖 - 使用了
!important在 input 的 color 上，间接压制 placeholder 颜色表现（虽不直接，但高 opacity + 暗色 text 容易让浅色 placeholder “融”进去）
建议用浏览器开发者工具「Computed」面板，逐层查看 ::placeholder 的最终 color 和 opacity 计算值，确认是否被继承或覆盖。
移动端 Safari 的特殊处理
iOS Safari 对 ::-webkit-input-placeholder 的 opacity 支持不稳定，有时设了 opacity: 0.6 却显示为全黑或全白。稳妥做法是：
- 统一用
color配合 rgba 值控制明暗，例如color: rgba(153, 153, 153, 0.7); - 避免在
::-webkit-input-placeholder中单独设 opacity - 必要时用 JavaScript 动态检测 iOS 并加载独立样式
不复杂但容易忽略
