直接写color对placeholder无效，因其是浏览器独立渲染的伪元素，不继承input样式；必须用::placeholder伪元素并补全::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder等前缀，且Firefox需显式设opacity:1。
直接写 color 对 placeholder 无效，必须用 ::placeholder 伪元素配合浏览器前缀，否则在任意主流浏览器里都改不了颜色。
为什么 input { 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; } 在 Safari ≤14、Firefox 18–50、IE 11 等环境会失效。最小兼容写法必须包含以下四类：
-
input::-webkit-input-placeholder：Chrome、Edge（Chromium）、Safari（WebKit/Blink） -
input::-moz-placeholder：Firefox 19+（双冒号） -
input:-moz-placeholder：Firefox 4–18（单冒号，已废弃但仍有少量旧环境需要） -
input:-ms-input-placeholder：IE 10–11（单冒号）
顺序建议把标准语法 input::placeholder 放在最后，确保新浏览器优先匹配最新规范；旧前缀放前面，避免被覆盖。
立即学习“前端免费学习笔记（深入）”；
Firefox 的 opacity 默认值是最大坑点
Firefox 对 ::-moz-placeholder 默认设了 opacity: 0.53，即使你写了 color: #6c757d，实际看起来也偏淡发灰。务必显式重置：
input::-moz-placeholder {
color: #6c757d;
opacity: 1; /* 关键！否则颜色发灰 */
}其他浏览器虽无此默认，但统一加 opacity: 1 可避免跨环境色差。另外：
– font-family 不会自动继承，必须单独声明；
– background-color、padding、border 等盒模型属性对 ::placeholder 完全无效，静默忽略；
– 若用了 Vue <style scoped> 或 CSS-in-JS，::placeholder 可能被隔离失效，得用 :deep() 或提全局样式。
type="number" 下 ::placeholder 失效怎么办
某些 Chrome 版本（尤其是 120+）中，input[type="number"] 会直接忽略 ::placeholder 样式。这不是 bug，是 Blink 内核的限制行为。临时解法只有两个：
- 换用
type="text"+ 前端 JS 校验输入是否为数字； - 放弃原生
type="number"，改用带数字键盘触发逻辑的自定义组件（如监听inputmode="numeric"和pattern="[0-9]*"）。
暗色模式下还要额外注意：@media (prefers-color-scheme: dark) 里必须重置 ::placeholder 颜色，否则 #999 在深色背景上直接糊成一片——CSS 变量也不会自动响应，得手动更新。
