必须补全浏览器前缀才能真正兼容：Chrome/Firefox/Edge现代版用::placeholder，Safari 14.1前需::-webkit-input-placeholder，IE11仅支持:-ms-input-placeholder，且须显式设置opacity防止颜色过淡。
::placeholder 本身就能改颜色，但只写它，大部分用户根本看不到效果。 因为浏览器支持断层太明显：Chrome 57+、Firefox 51+、Edge 79+ 才认标准双冒号写法；Safari 14.1 之前完全无视 ::placeholder；IE11 则彻底不支持任何变体。光靠一条规则，等于默认放弃旧 Safari 和企业内网用户。
为什么 ::placeholder 写了却没反应？
最常见原因不是语法错，而是被覆盖或压根不识别：
- DevTools 里看到
::placeholder规则被划掉？大概率是全局样式（比如input { color: #333; }）或 UI 框架（如 Bootstrap、Ant Design）用更高优先级重置了它 - 规则写成
:placeholder（单冒号）或:: placeholder（带空格）——这两种都无效，必须严格用::placeholder - Vue 的
<style scoped>或 React CSS Modules 会自动加属性选择器，导致input::placeholder变成input[data-v-xxx]::placeholder，而浏览器不支持这种组合匹配，得用:deep(input::placeholder)或:global(input::placeholder)穿透
必须补哪些前缀才真正兼容？
不能只抄“现代写法”，得按实际支持范围选：
-
input::-webkit-input-placeholder：覆盖 Chrome 49–56、Safari 9–15.3、Opera —— 这条现在仍必要，尤其要照顾 iOS Safari 15.3 及更早版本 -
input::-moz-placeholder：Firefox 19+（双冒号），必须保留；input:-moz-placeholder（单冒号）可省，仅 Firefox 18 及更早需它，已无实际意义 -
input:-ms-input-placeholder：IE 10–11 唯一可用写法，双冒号的::-ms-input-placeholder在 IE 中无效 -
input::placeholder：放最后，作为现代浏览器兜底，确保它不被前缀规则意外覆盖
别写 input::-moz-input-placeholder 或 input::-ms-input-placeholder —— 这些是过时且无效的拼写，部分浏览器会静默忽略甚至干扰层叠。
颜色设太浅？别只调 color，加 opacity
Firefox 默认给 ::placeholder 设了 opacity: 0.53，Chrome 某些版本也会降暗；只改 color: #999，在 Firefox 里可能比预期淡得多：
立即学习“前端免费学习笔记（深入）”；
- 显式加
opacity: 0.7或opacity: 1，比单纯调深color更可控 - 避免用
color: #ccc配opacity: 0.3—— 这类组合在 Windows + Chrome 下容易糊成一片，可读性反而下降 - 深色模式下，
@media (prefers-color-scheme: dark)里重设color和opacity，别指望它自动适配
真正难搞的从来不是怎么写，而是你写的那条规则，在 Safari 14.0 的 iPad 上、IE11 的内网终端里、或者被 Ant Design 的 reset.css 覆盖后，到底还剩几分效力。
