color属性对placeholder完全无效，因其只控制用户输入文字颜色；placeholder是独立伪内容，不继承input样式，必须用::placeholder伪元素并补全浏览器前缀（如::-webkit-input-placeholder、::-moz-placeholder等）配合opacity:1才能生效。
color 属性对 placeholder 完全无效——它只控制用户输入的文本颜色，占位符文字必须用 ::placeholder 伪元素单独设置。
为什么直接写 color: red 不影响 placeholder
因为 placeholder 是浏览器渲染的独立伪内容，不是 DOM 节点，也不继承 input 的文本样式。哪怕你给 input 设置了 color: #ff6b6b，占位符仍显示默认浅灰（如 #999 或 rgba(0,0,0,0.45)）。内联样式（如 style="color:red"）或自定义属性（如 placeholderstyle）同样被忽略。
::placeholder 是现代标准，但必须补全前缀
仅写 input::placeholder { color: #6c757d; } 在旧版 Chrome（
-
input::-webkit-input-placeholder：Chrome、Safari、Edge（Blink/WebKit） -
input::-moz-placeholder：Firefox 19+（注意双冒号） -
input:-moz-placeholder：Firefox 4–18（单冒号，已废弃但仍有少量环境需要） -
input:-ms-input-placeholder：IE 10–11
顺序建议把标准语法 ::placeholder 放在最后，确保新浏览器优先匹配最新规范。
立即学习“前端免费学习笔记（深入）”；
Firefox 的 opacity 默认值容易踩坑
Firefox 对 ::-moz-placeholder 默认设了 opacity: 0.53，即使你写了 color: #6c757d，实际看起来也偏淡。务必显式重置：
input::-moz-placeholder {
color: #6c757d;
opacity: 1; /* 关键！否则颜色发灰 */
}其他浏览器虽无此默认，但统一加 opacity: 1 可避免跨环境色差。
::placeholder 支持哪些 CSS 属性
它只接受文本类样式，不支持盒模型属性：
- ✅ 支持：
color、font-size、font-family、text-transform、line-height、opacity - ❌ 不支持：
background-color、border、padding、margin—— 这些对占位符无效果，也不会报错，只是静默忽略
若想让 placeholder 看起来“更靠右”或“上下居中”，得改 input 自身的 padding 或 text-align，而不是作用于 ::placeholder。
真正起效的最小兼容写法，必须同时覆盖四类前缀；漏掉任意一个，就可能在某个旧版浏览器里回归默认灰色。
