用color属性无法修改input的placeholder文字颜色，必须使用::placeholder伪元素；现代浏览器支持::placeholder，旧版需添加::-webkit-input-placeholder等前缀兼容。
直接用 color 属性改 input 文字颜色，对 placeholder 完全无效——它只是用户输入内容的样式，占位符是浏览器渲染的独立伪内容，不继承、不响应常规文本样式。
必须用 ::placeholder 伪元素统一控制
现代标准写法是 ::placeholder，但老版本浏览器仍需对应前缀规则才能生效。只写一条规则，旧版 Chrome、Firefox、IE 都会忽略。
-
::-webkit-input-placeholder：适配 Chrome -
::-moz-placeholder：适配 Firefox 19+ -
:-moz-placeholder：适配 Firefox 4–18（已过时，但留着更稳妥） -
:-ms-input-placeholder：适配 IE 10–11 - 所有规则都建议加
opacity: 1，防止某些浏览器默认压暗占位符
推荐的一套兼容写法
把下面这段 CSS 直接复制进你的样式表，就能覆盖主流浏览器：
.form-control::placeholder {
color: #6c757d;
opacity: 1;
}
.form-control::-webkit-input-placeholder {
color: #6c757d;
}
.form-control::-moz-placeholder {
color: #6c757d;
opacity: 1;
}
.form-control:-moz-placeholder {
color: #6c757d;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #6c757d;
}
注意：选择器要和你的 input 元素类名一致（比如用 .input-field 就把所有 .form-control 换成它）；如果用的是内联样式或 JS 动态插入 style，也要确保这些规则能被正确加载。
IE9 及更早版本不支持 placeholder
它们压根不识别 placeholder 属性，所以以上所有 CSS 都无效。若需支持，得用 JS 模拟：比如用 value + focus/blur 事件手动切换提示文字，并配合样式控制显示状态。不过现在绝大多数项目已不再要求兼容 IE9 以下，可优先确认目标用户环境再决定是否投入开发成本。
别漏掉 DOCTYPE 和标准模式
如果 HTML 开头有空格、BOM 或注释，IE/Edge 会进入怪异模式（Quirks Mode），连 ::placeholder 这类基础伪元素都可能失效。务必保证 顶格、无任何前置字符，并在 DevTools 的 Elements 标签页顶部确认显示 “Standards” 而非 “Quirks”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
