直接用::placeholder伪元素改颜色，现代浏览器均支持；只设color属性，避免误调opacity导致提示文字不可见；注意优先级冲突、type="number"兼容性及深色背景下的显色问题。
input的placeholder颜色怎么改
直接用::placeholder伪元素，别试:placeholder或::-webkit-input-placeholder这种老写法——现代浏览器（Chrome 57+、Firefox 51+、Safari 10.1+）都支持标准语法，兼容性够用。
常见错误是写成input::placeholder却忘了加color以外的样式（比如opacity）会意外覆盖默认透明度，导致提示文字看不清。
- 只改颜色：用
color，别碰opacity，除非你真想调淡 - 字体大小/行高要同步设：placeholder默认继承
font但不继承line-height，容易错位 - 深色背景上务必设
color，否则可能被系统默认灰黑色吞掉
为什么有时placeholder颜色不生效
最常踩的坑是CSS优先级或选择器太弱。比如写了input::placeholder { color: #999; }，但页面里有更具体的规则（如.form-control input::placeholder）或带!important的旧样式，直接盖掉。
另一个隐蔽问题是type="number"输入框在某些Chrome版本中会忽略::placeholder，得加appearance: none或换用type="text"再做数字校验。
立即学习“前端免费学习笔记（深入）”；
- 检查开发者工具里
::placeholder是否被划掉（表示未匹配或被覆盖） - 避免用
input[type="text"]::placeholder这种冗余写法，反而降低可读性 - Vue/React里动态class没更新时，placeholder样式可能滞留在旧DOM节点上
跨浏览器兼容需要补哪些前缀
现在基本不用了。但如果你必须支持IE11或旧版Safari（
-
::-webkit-input-placeholder（Chrome/Safari/Edge旧版） -
::-moz-placeholder（Firefox 18–19，注意是单冒号） -
::-ms-input-placeholder（IE10–11）
注意：这些前缀版本对color支持稳定，但对background或padding支持极差，别乱试。补全写法示例：
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input::-ms-input-placeholder {
color: #666;
}
placeholder文字能加图标或换行吗
不能。CSS伪元素::placeholder只接受纯文本样式控制，不支持content、background-image或white-space: pre-wrap等生成内容或布局干预。
如果真要图标，得用JS在input外层包一层div，把图标作为兄弟元素绝对定位；换行则只能靠textarea + rows属性，input[type="text"]天生单行。
- 试图用
data-*属性配合伪元素生成内容？无效——::placeholder不读取HTML属性 - 用
title替代placeholder？语义错误，且不触发CSS伪元素 - 移动端iOS Safari对
font-size缩放敏感，设14px可能被强制放大，建议用rem
真正难搞的是placeholder和用户输入文字的视觉一致性——比如输入框聚焦后placeholder消失，但用户删空内容时又得立刻回来，这个切换时机CSS管不了，得靠JS监听input事件手动控制显示逻辑。
