color属性对placeholder完全无效，因其仅控制用户输入文本颜色；placeholder是浏览器独立渲染的伪元素，不继承input样式，必须用::placeholder伪元素显式设置color及opacity等有限样式，并补全各浏览器前缀以确保兼容。
color 属性对 input 的 placeholder 完全无效——它只控制用户输入的文本颜色，占位符必须用 ::placeholder 伪元素单独设置，否则在任意浏览器里都看不到效果。
为什么直接写 color: red 不生效
因为 placeholder 是浏览器渲染的独立伪内容，不是 DOM 节点，也不继承 input 的样式。哪怕你给 input 设置了 color: #ff6b6b，占位符仍显示默认浅灰（如 #999 或 rgba(0,0,0,0.45)）。内联样式（如 style="color:red"）或自定义属性（如 placeholderstyle）同样被忽略。
DevTools 中如果看到 ::placeholder 规则被划掉，说明被更高优先级样式覆盖；如果根本没出现，大概率是选择器写错，或浏览器不识别（比如漏了前缀）。
::placeholder 兼容写法必须覆盖四类前缀
仅写 input::placeholder { color: #6c757d; } 在旧版 Chrome、Safari ≤14、IE11 或某些 Firefox 版本里会失效。真正起效的最小兼容写法需同时包含：
-
input::-webkit-input-placeholder：Chrome、Edge（Blink/WebKit）、Safari ≥10.1 -
input::-moz-placeholder：Firefox 19+（双冒号，必须加opacity: 1，否则默认0.53导致发灰） -
input:-moz-placeholder：Firefox 4–18（单冒号，已废弃但仍有少量环境需要） -
input:-ms-input-placeholder：IE 10–11
顺序建议把标准语法 input::placeholder 放在最后，确保新浏览器优先匹配最新规范。
::placeholder 只支持有限 CSS 属性
它不是普通文本节点，只接受文本类样式，盒模型属性静默忽略：
- ✅ 支持：
color、font-size、font-family、text-transform、line-height、opacity - ❌ 不支持：
background-color、border、padding、margin——写了也无效，不报错，只是被浏览器跳过
若想让占位符“看起来更靠右”或“上下居中”，得改 input 自身的 padding 或 text-align，而不是作用于 ::placeholder。
Vue / React 项目里 ::placeholder 失效怎么办
如果用了 <style scoped></style>（Vue）或 CSS-in-JS（如 styled-components），::placeholder 会被样式隔离机制过滤掉：
- Vue 中需用
:deep(input::placeholder)显式穿透 - React 中建议提为全局 CSS 文件，或使用
!important强制覆盖（仅限调试） - 避免在组件内联样式中尝试控制，HTML 不支持
placeholderstyle这类属性
最易被忽略的一点：Firefox 的 opacity 默认值是 0.53，即使写了 color，不显式设 opacity: 1 就永远偏淡；其他浏览器虽无此默认，但统一加 opacity: 1 是跨环境保色的底线操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
