不同浏览器对::placeholder支持不一，需同时写input::placeholder、::-webkit-input-placeholder、::-moz-placeholder等前缀规则，且标准写法放最后；Firefox不支持opacity，须用rgba()设透明度；Safari有font-weight回退和border-radius兼容问题。
Chrome/Firefox/Safari 中 placeholder 文字颜色不一致
默认情况下，::placeholder 在不同浏览器渲染出的颜色差异明显，尤其当页面设了深色背景或全局 color 时，Firefox 可能完全不显示文字，Safari 会忽略部分透明度设置。
- 根本原因是各浏览器对
::placeholder的伪元素实现不统一：Chrome 支持::-webkit-input-placeholder，Firefox 用::-moz-placeholder（注意是单冒号），Safari 15.4+ 才稳定支持标准::placeholder - 不能只写一条规则，必须叠加所有前缀，且顺序有讲究：标准写法放最后，否则会被带前缀的旧规则覆盖
- 透明度（
opacity）在 Firefox 中对::-moz-placeholder无效，得用rgba()或hsla()显式定义 alpha
如何一次性写全兼容的 placeholder 颜色样式
直接上可复制粘贴的最小可用块，覆盖主流浏览器（含 iOS Safari 16+ 和 Android Chrome 110+）：
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
color: #999;
opacity: 1;
}
-
input::placeholder是标准语法，必须放在最后，确保高优先级浏览器（如新版 Edge、Safari）走这条路径 -
input::-moz-placeholder要单独写，且不能加!（Firefox 不认!important在这个伪元素上） - 如果需要浅灰 + 半透效果，别用
opacity: 0.6，改用color: rgba(153, 153, 153, 0.6)，否则 Firefox 下失效 - 避免用
inherit或currentcolor做 placeholder 颜色——Safari 会继承 input 的 border 颜色，导致文字不可见
遇到 placeholder 突然消失或变黑怎么办
常见于 CSS 框架（如 Tailwind、Bootstrap）或重置样式（normalize.css）干扰后，实际是被更高权重的选择器覆盖了。
- 检查是否引入了
prefers-color-scheme相关媒体查询，某些 dark mode 主题会把::placeholder设为#000，在浅色模式下反而刺眼 - 用 DevTools 的“Computed”面板点开
::placeholder，看哪条规则生效——经常是某条通用*::placeholder把所有输入框一锅端了 - 如果用了 CSS-in-JS（如 Emotion、Styled-components），确认插件是否自动剥离了带前缀的伪元素（比如
-webkit-被 Babel 插件误删） - iOS Safari 16.4 有个已知 bug：当
input同时设了border-radius和background-clip: padding-box，placeholder 会消失，临时解法是去掉后者
要不要用 JavaScript 动态控制 placeholder 样式
绝大多数场景不需要。CSS 伪元素已足够稳定，JS 方案反而引入新问题。
立即学习“前端免费学习笔记（深入）”；
- 监听
focus/blur用 class 切换 placeholder 颜色，看似灵活，但无法响应系统级主题切换（如 macOS 的自动深色模式） - 用
getComputedStyle(input, '::placeholder')获取颜色？不行——所有浏览器都返回''或undefined，这个 API 本身不支持伪元素读取 - 唯一合理用 JS 的情况：需要根据输入内容实时改变 placeholder 提示文字（比如搜索框的“搜商品/订单号”），但颜色仍应由 CSS 控制
font-weight 在 ::placeholder 上的限制——设了 font-weight: 600，它可能直接回退到 400 且不报错。如果设计稿要求 placeholder 和 label 字重一致，得提前在 Safari 上真机验证。 
