直接改color属性对placeholder无效，必须用::placeholder伪元素并写全浏览器前缀规则；因placeholder是独立伪内容，不继承input的color样式，且无dom节点，只能通过伪元素匹配。
直接改 color 属性对 placeholder 完全无效 —— 必须用 ::placeholder 伪元素，且不同浏览器要写多套规则，否则在旧版 Firefox 或 IE 里颜色根本不会变。
为什么 color 样式不作用于 placeholder
HTML 输入框的 color CSS 属性只控制用户实际输入的文字颜色，placeholder 是独立渲染的伪内容，不继承父级文本样式。哪怕你给 input 设置了 color: red，placeholder 依然显示浏览器默认的浅灰色（通常是 #999 或透明度降低的 #aaa）。
- placeholder 不是子节点，无法通过普通选择器捕获
- 它没有 DOM 节点，只能靠伪元素匹配
- 内联样式（如
style="color:red"）或自定义属性（如placeholderstyle）全部被忽略
::placeholder 的写法和浏览器兼容性陷阱
现代写法是 input::placeholder，但仅靠这一条，在 Chrome 56、Firefox 50、IE 11 等环境中会失效。必须补全前缀版本，且注意冒号数量和拼写差异：
-
input::placeholder：Chrome 57+、Firefox 51+、Safari 10.1+、Edge 79+ -
input::-webkit-input-placeholder：Chrome 49–56、Safari 9–10、Edge 12–18 -
input::-moz-placeholder：Firefox 19–50（双冒号，opacity: 1建议显式加，否则文字发虚） -
input:-moz-placeholder：Firefox 4–18（单冒号，已废弃但部分老项目仍需兜底） -
input:-ms-input-placeholder：IE 10–11（单冒号）
漏掉任意一条，对应浏览器里 placeholder 就退回默认色 —— 不报错，也不提示，纯静默失效。
怎么写才能一次生效又不过度冗余
推荐按「现代优先 + 必要前缀」策略组织 CSS，避免无意义重复。重点不是堆写法，而是覆盖真实存量环境：
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
color: #6c757d;
font-style: italic;
}
<p>/<em> 单独处理 Firefox 透明度问题 </em>/
input::-moz-placeholder {
opacity: 1;
}
</p>
- 把所有规则合并到一个声明块里，减少 CSS 文件体积
- 不要用
*::placeholder全局匹配 —— 它在 Safari 和旧 Edge 中不生效，还可能污染textarea等其他元素 - 颜色值别用太浅的灰（如
#eee），WCAG 要求与背景对比度 ≥ 4.5:1，建议用#6c757d或更暗的#495057
textarea 的 placeholder 颜色要单独写
textarea::placeholder 和 input::placeholder 是两个独立选择器，不能共用。如果你只写了 input 的规则，textarea 的 placeholder 依然保持默认色：
- 必须显式写出
textarea::placeholder及其对应前缀版本 - 可以复用同一套颜色值，但选择器不能省略
- 某些 UI 框架（如 Bootstrap）只给
input写了 placeholder 样式，textarea得自己补
最易被忽略的是：placeholder 文字不响应 font-family 或 font-size 的继承，所有样式都得在 ::placeholder 块里重新声明 —— 连斜体、字号、行高都要手动配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
