::placeholder是现代浏览器标准写法，Chrome 57+、Firefox 52+、Safari 10.1+、Edge 79+原生支持；老版本需按需补前缀，但失效主因常是选择器不匹配、优先级不足或未显式声明color。
::placeholder 是唯一可靠、标准且现代的写法，直接生效于 Chrome 57+、Firefox 52+、Safari 10.1+、Edge 79+。老版本浏览器（如 IE11、旧版 Safari）需补前缀，但不是靠堆砌所有前缀——而是按需兜底。
为什么 ::placeholder 写了没反应？
常见失效原因不是语法错，而是被更高优先级规则压制或选择器不匹配：
- 写成
:placeholder（少一个冒号）→ 完全无效，CSS 解析器直接忽略 - 在 Vue
<style scoped>或 React CSS Modules 中直接写::placeholder→ 会被自动加上属性选择器，但部分构建工具对伪元素处理不稳定，建议提至全局样式块 - 父级设置了
color，误以为会继承 →::placeholder不继承任何颜色，必须显式声明color - DevTools 里该样式被划掉 → 很可能是 user agent stylesheet 的默认规则权重更高，加
!important可临时验证（但上线前应改用更精确的选择器，比如input.my-input::placeholder）
::-webkit-input-placeholder 和 ::placeholder 能共存吗？
能，但要注意层叠顺序和实际生效逻辑：
- WebKit 内核（Chrome/Safari/Edge）下，
::-webkit-input-placeholder会覆盖::placeholder，即使后者写在后面 - 所以推荐写法是：先写标准
::placeholder，再单独补::-webkit-input-placeholder作兼容，且两者声明保持一致 - Firefox 18–50 需要
:-moz-placeholder（单冒号），但已基本淘汰；51+ 统一用::-moz-placeholder（双冒号），和标准写法行为一致 - IE10–11 只认
::-ms-input-placeholder，:-ms-input-placeholder（单冒号）在 IE11 中不生效
暗色模式下 placeholder 看不清怎么办？
不能依赖 prefers-color-scheme 自动响应占位符——它本身不参与系统主题切换，必须手动媒体查询重置：
立即学习“前端免费学习笔记（深入）”；
- 用
@media (prefers-color-scheme: dark)包裹::placeholder规则，并显式设color（比如#666） - 如果项目用了 CSS 变量（如
--placeholder-color），记得在媒体查询里也更新变量值：:root { --placeholder-color: #999; } @media (prefers-color-scheme: dark) { :root { --placeholder-color: #666; } } - 别只在 DevTools 里点“模拟暗色模式”就认为 OK——真机 Safari 对
prefers-color-scheme的触发有延迟，Android Chrome 某些版本甚至需要重启页面才生效
想让 placeholder 悬停变色，怎么写？
直接用 input:hover::placeholder 即可，不需要 JS：
input::placeholder {
color: #999;
transition: color 0.2s;
}
input:hover::placeholder {
color: #333;
}
但注意：
- 这个写法在 Firefox 中需配合
opacity: 1（因为 FF 默认给占位符加了 opacity），否则 hover 后可能颜色没变化 - 移动端没有
:hover，所以该效果仅适用于桌面端；若需触屏反馈，得换用:focus-within或监听focus事件 - 不要对
::placeholder自己加:hover——伪元素不支持交互伪类，写了也无效
真正容易被忽略的是：占位符样式不是“改完就完”，它受父级 font-size、line-height、padding 共同影响。文字截断、上下偏移、暗色模式下糊成一片……这些问题几乎都出在排版未对齐，而不是颜色本身。
