placeholder文字颜色不能直接用color设置，因为placeholder是独立伪元素，不继承input的color样式，且各浏览器对::placeholder支持不一致，需同时声明标准写法及webkit、mozilla等前缀版本才能全兼容。
placeholder文字颜色为什么不能直接用color设置
因为不同浏览器对 ::placeholder 伪元素的实现不一致，直接写 color: #666 在 Chrome 或 Edge 可能生效，但在 Firefox 或 Safari 就会失效——它们把 placeholder 当作独立伪元素处理，需要显式加浏览器前缀或使用标准语法。
必须写的三套CSS规则才能全兼容
只写一套样式根本覆盖不了所有环境。实际项目中至少要同时声明以下三组：
-
::placeholder（现代标准，Chrome 57+、Firefox 51+、Safari 10.1+） -
::-webkit-input-placeholder（旧版 WebKit，包括老 Chrome/Safari） -
::-moz-placeholder（Firefox 19–50，注意是单冒号）
示例：
input::placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
input::-moz-placeholder {
color: #999;
}
遇到颜色不生效？先检查这三点
常见无效原因不是语法错，而是被其他样式覆盖或触发条件不对：
- 父容器设置了
color且未重置，placeholder 会继承（某些旧版 Safari 有此行为） - 用了
!important但写在了错误的伪元素上（比如只给::-webkit-input-placeholder加，漏掉其他） - 输入框有
disabled属性——此时 placeholder 不显示，自然也改不了颜色
字体大小和透明度能一起调吗
可以，但要注意：Firefox 对 opacity 支持不稳定，建议用 color 配合 rgba 值控制明暗；font-size 在所有浏览器都支持，但不要设得比 input 本身还小，否则在移动端可能触发自动缩放。
安全写法：
input::placeholder {
color: rgba(153, 153, 153, 0.8);
font-size: 14px;
}
真正麻烦的是 iOS Safari 的 placeholder 渲染机制——它有时会无视 font-size，只认 input 的 line-height 和 padding，这时候得靠调整整体布局来间接控制视觉大小。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
