必须用::placeholder伪元素并补全浏览器前缀（如::-webkit-input-placeholder、::-moz-placeholder等）才能修改placeholder颜色，仅设color属性无效，因其不继承input样式且为独立伪内容。
如何用CSS修改 input 和 textarea 的 placeholder 颜色
直接改 ::placeholder 伪元素就行，但浏览器兼容写法必须补全前缀，否则在 Safari 或旧版 Edge 里不生效。
- 现代写法：
::placeholder（Chrome 57+、Firefox 51+、Safari 10.1+） - Safari 9–10.0 需要
::-webkit-input-placeholder - Firefox 18–50 需要
::-moz-placeholder（注意是单冒号） - IE10–11 用
::-ms-input-placeholder
只写一个规则大概率失效，尤其当用户用老版本 Safari 打开页面时——placeholder 会保持默认浅灰，根本看不到你设的颜色。
input[type="password"] 的 placeholder 为什么改不了颜色
部分浏览器（如旧版 Chrome）对密码框的 ::placeholder 有特殊限制：即使写了样式，也可能被忽略或强制降级为灰色。这不是你代码写错了，是浏览器策略。
- 验证方式：先把 type 改成
text，确认颜色能生效，再换回password看是否失效 - 可行方案：用 JavaScript 模拟 placeholder（监听
focus/blur，动态切换 value 和 class），但要注意无障碍支持 - 更稳妥的做法：接受密码框 placeholder 颜色不可控的事实，优先保证文本框和邮箱框等非敏感输入项的视觉一致性
为什么加了 !important 还没生效
常见原因是 CSS 选择器权重不够，或者样式被更高优先级的规则覆盖（比如框架自带的 reset.css 或 UI 库的全局 placeholder 样式）。
立即学习“前端免费学习笔记（深入）”；
- 检查开发者工具里，
::placeholder规则是否被划掉；如果被划掉，说明被其他规则覆盖 - 提高权重：把选择器写具体些，比如
.form-control::placeholder而不是泛泛的input::placeholder -
!important不是万能解药，它可能被另一个带!important的同级规则压住，此时得看源码顺序和 specificity 计算
深色模式下 placeholder 颜色要不要自动适配
要，而且不能只靠 color: #999 这种固定值。系统深色模式开启后，浅灰文字在深背景上对比度不足，用户根本看不清提示文字。
- 推荐用
color: var(--placeholder-color)，配合@media (prefers-color-scheme: dark)动态设置变量 - 更省事的写法：
color: rgba(0, 0, 0, 0.4)→ 在深色背景下会自动变浅（因背景变暗，相对透明度感知不同），但不如变量可控 - 别忘了测试：手动切系统深色模式，打开页面看 placeholder 是否可读——很多团队只测浅色模式就上线，结果用户反馈“输不了”
placeholder 颜色看着小，但影响第一眼交互体验；最常出问题的是 Safari 兼容性和密码框限制，这两点容易漏测。
