最常见原因是浏览器前缀缺失或选择器权重不足；需为Chrome/Edge、Firefox、Safari分别声明对应伪元素，且仅color、font-size等部分文本属性有效，深色模式需顶层媒体查询重复整套规则。
为什么::placeholder有时不生效
最常见原因是浏览器前缀缺失或选择器权重不足。Chrome/Edge 用 ::placeholder，Firefox 需要 ::-moz-placeholder（旧）或 ::placeholder（新），Safari 15.4+ 才完全支持无前缀写法。如果只写一条规则，老版本 Firefox 或 Safari 可能直接忽略。
- 必须为每个目标浏览器显式声明对应伪元素，不能依赖“自动降级”
-
::placeholder的 CSS 权重和普通类名一致，若父容器有input { color: #333; }这类强样式，可能覆盖掉 placeholder 颜色 - 部分 UI 框架（如 Ant Design、Element Plus）会用内联 style 或更高优先级 class 锁定 placeholder 样式，需用
!important强制覆盖（慎用，仅当必要）
::placeholder 支持哪些 CSS 属性
它只接受一部分文本相关属性，不是所有 input 能用的样式都能继承过去。比如 background-color、border、padding 无效；但 color、font-size、font-family、opacity、text-overflow 是安全的。
-
color是最常用且最稳定的支持项，推荐作为基础调整点 -
opacity可模拟“淡入”效果，但注意 Safari 对opacity在::placeholder中的支持较晚（v14.1+），低版本建议用color: rgba(128, 128, 128, 0.6) - 不要尝试设置
line-height或vertical-align—— 它们不会影响 placeholder 垂直位置，对齐靠的是 input 自身行高
如何一次性兼容主流浏览器
写法必须冗余，但这是目前最稳妥的方式。把所有已知前缀和标准写法并列写出，让浏览器自行选择匹配项。
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
color: #999;
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
- 顺序无关紧要，但建议把标准写法
::placeholder放第一位，符合未来维护习惯 - IE11 只认
:ms-input-placeholder（单冒号），不是双冒号，别写错 - 如果项目已用 PostCSS，可用
autoprefixer自动补全，配置中需启用supports和placeholder特性
在深色模式下动态切换 placeholder 颜色
不能只靠 @media (prefers-color-scheme: dark) 包裹整个规则块 —— 因为伪元素本身不支持嵌套媒体查询。正确做法是把媒体查询放在顶层，重复声明整套 placeholder 规则。
@media (prefers-color-scheme: dark) {
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
color: #666;
}
}
- 深色模式下避免用纯白
#fff，易与背景融合，推荐#666或hsl(0 0% 40%)这类中灰 - 如果 input 本身有
background-color动态切换，placeholder 颜色也要同步调，否则对比度可能不达标（WCAG AA 要求至少 4.5:1） - 某些设计系统会禁用深色模式下的 placeholder，改用 label 浮动动画替代，这时就根本不需要配
::placeholder
实际项目里最容易被忽略的是：placeholder 文字在 focus 后是否应消失 —— 这由浏览器默认控制，无法用 CSS 干预；如果需要自定义聚焦时的提示行为（比如 label 上浮），就得放弃 placeholder，改用 JS + 额外 DOM 元素实现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
