因为placeholder是浏览器独立渲染的伪内容，不继承input的color等样式，仅通过::placeholder伪元素可定制；直接写input{color:…}只影响用户输入文字，对占位符无效。
为什么color直接写在input上对placeholder无效
因为placeholder文字不是input元素的子内容，而是浏览器渲染的独立伪内容，不继承color、font-family等文本样式。写input { color: #ff6b6b; }只影响用户输入的文字，占位符仍按浏览器默认灰（如rgba(0,0,0,0.45)）显示——这不是 bug，是规范行为。
::placeholder不生效的常见原因
即使写了标准伪元素，也常因以下问题被静默忽略：
-
::placeholder写成:placeholder（少一个冒号）或:: placeholder（冒号后加了空格），语法错误导致整条规则被丢弃 - UI 框架（如 Ant Design、Bootstrap）主动重置了
::placeholder，例如设opacity: 0.5或color: #6c757d，覆盖你的规则 - 选择器优先级不够：
input::placeholder默认权重低于.form-control::placeholder或#search::placeholder，DevTools 里能看到样式被划掉 - 用了
all: unset或all: initial作用于input，会清空伪元素样式 - 在 Vue 的
<style scoped></style>或 CSS-in-JS 中，::placeholder被作用域隔离，需用:deep()或提为全局样式
Safari 14.0 及更老版本必须补前缀
Safari ≤14.0 完全不识别::placeholder，只认::-webkit-input-placeholder。若项目需兼容企业内网旧版 Safari，必须显式添加：
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #999;
opacity: 1;
}
这条规则要放在::placeholder之后，确保现代写法优先；不要混用::-moz-placeholder或:-ms-input-placeholder——这些在当前主流版本中已废弃，反而可能触发冗余覆盖。
IE11 及更老浏览器无法用 CSS 解决
IE11 对所有::placeholder变体都不支持，:-ms-input-placeholder仅在 Edge 12–15 有效。此时 CSS 方案彻底失效，只能换思路：
- 用
<label></label>覆盖在input上方模拟占位符，通过focus/blur控制显隐 - 手动读取
input.getAttribute('placeholder')，避免依赖属性自动渲染 - 模拟元素必须设
pointer-events: none，否则会拦截点击，导致无法聚焦输入框
真正难处理的不是“怎么改颜色”，而是“什么时候该放弃 CSS、转向 JS 模拟”——这个判断点常被忽略，尤其在需要支持 Windows + IE11 企业环境时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
