input { color: red } 对 placeholder 完全无效，因其是独立伪内容，不继承普通样式；必须用 ::placeholder 及四套前缀（::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder、::placeholder）并显式设 opacity: 1 才能统一生效。
直接写 color 或其他文本样式到 input 元素上，对 placeholder 完全无效——它不是输入内容，也不继承父级样式，必须用伪元素单独控制。
为什么 input { color: red } 不影响 placeholder
placeholder 是浏览器渲染的独立伪内容，不参与 DOM 树，也不响应普通 CSS 继承。哪怕你给 input 设了 color: #ff6b6b、font-size: 16px，占位符文字仍按浏览器默认（通常是 rgba(0,0,0,0.45) 或 #999）显示。内联样式、自定义属性、甚至 !important 都被忽略。
::placeholder 及各浏览器前缀必须全写
仅写 input::placeholder { color: #6c757d; } 在旧版 Chrome、Firefox 或 IE 中会失效。真实兼容写法需覆盖四类前缀，且顺序建议把标准语法放最后：
-
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
漏掉任意一个，就可能在某个用户浏览器里回归默认浅灰色。
Firefox 的 opacity 是隐藏大坑
Firefox 对 ::-moz-placeholder 默认设置了 opacity: 0.53，即使你写了 color: #6c757d，实际颜色也会发灰、变淡。必须显式重置：
input::-moz-placeholder {
color: #6c757d;
opacity: 1; /* 关键！否则颜色不对 */
}
其他浏览器虽无此默认，但统一加 opacity: 1 可避免跨环境色差。另外注意：::placeholder 只支持文本类样式（color、font-size、line-height、text-transform 等），不支持 background-color、padding、border —— 这些会被静默忽略。
想“调位置”别动 ::placeholder
placeholder 无法通过 text-align 或 padding 在伪元素里调整左右/上下偏移。如果提示文字看起来太靠左或顶边，该改的是 input 自身的 padding、text-align 或 line-height。例如让文字垂直居中，优先确保 input 的 height 和 line-height 匹配，而不是在 ::placeholder 里硬塞 line-height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
