使用::placeholder伪元素可修改输入框占位文字颜色，需兼顾浏览器兼容性，推荐同时书写标准写法及-moz-、-webkit-前缀版本，并注意选择器优先级与样式覆盖问题。
直接用 ::placeholder 伪元素就能改表单输入框里的占位文字颜色，但要注意浏览器兼容性和写法细节。
基础写法（推荐加前缀）
不同浏览器对 ::placeholder 的支持不一致，为确保兼容 Chrome、Firefox、Safari 和 Edge，建议同时写标准写法和带前缀的版本：
-
::placeholder（现代标准） -
::-moz-placeholder（旧版 Firefox） -
::-webkit-input-placeholder（Safari / Chrome 旧版）
示例 CSS：
input::placeholder,
textarea::placeholder {
color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #666;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #666;
}
只针对某类输入框设置
如果只想改密码框或搜索框的占位色，可以加属性选择器限定：
立即学习“前端免费学习笔记（深入）”；
input[type="password"]::placeholder { color: #999; }input[type="search"]::placeholder { color: #aaa; }
注意：type="search" 在 Safari 中可能需要额外处理 ::-webkit-search-cancel-button，但占位色本身用 ::placeholder 即可生效。
颜色之外还能调样式
::placeholder 支持常见文本样式，比如：
- 改变透明度：
opacity: 0.7; - 调整字体大小：
font-size: 14px;（部分浏览器支持有限） - 加粗或斜体：
font-weight: normal;或font-style: italic;
不过字体大小在 Firefox 中可能被忽略，优先保证颜色和透明度更稳妥。
避免被其他样式覆盖
如果颜色没生效，可能是被更高优先级的规则覆盖了。检查：
- 是否有全局重置样式（如
* { color: #333; }）影响了伪元素 - 是否用了
!important强制设置了 input 的 color，它不会继承到 placeholder - 确保选择器足够具体，比如用
.form-control::placeholder比单纯::placeholder更容易生效
