Chrome/Firefox中::placeholder颜色不生效，主因是CSS优先级覆盖、浏览器兼容性差异或框架样式重置；需用双冒号语法、兼顾各浏览器前缀、避免内联样式干扰，并通过class而非style动态控制。
Chrome/Firefox里::placeholder颜色不生效？检查伪元素是否被覆盖
直接写 ::placeholder 但文字还是灰色，大概率是 CSS 优先级或浏览器默认样式干扰。它本质是个伪元素，和 ::before 一样受层叠规则约束，不是“一设就灵”。
- 必须用
::placeholder（双冒号），:placeholder（单冒号）只在旧版 WebKit 里部分支持，现在基本不用 - 如果 input 上有内联样式或高权重类（比如
!important的 color），会盖掉::placeholder的 color - 某些 UI 框架（如 Bootstrap、Ant Design）会重置 placeholder 样式，得加更具体的选择器，比如
input.form-control::placeholder
Safari 和 Edge 对::placeholder的支持差异
Safari 15.4+ 才完全支持标准 ::placeholder；更早版本（包括 Safari 15.0–15.3）只认 ::-webkit-input-placeholder。Edge 基于 Chromium 后基本和 Chrome 一致，但旧版 Edge（EdgeHTML）要单独写 ::-ms-input-placeholder。
- 最稳妥的写法是三者并列，顺序无所谓，但建议把标准写法放最后，方便未来清理
- 不要只写
::-webkit-input-placeholder，否则在新版 Safari 或 Firefox 里失效 - 注意：Safari 15.4+ 已废弃前缀写法，但保留兼容；Firefox 从没支持过前缀版
input::placeholder {
color: #666;
}
input::-webkit-input-placeholder {
color: #666;
}
input::-ms-input-placeholder {
color: #666;
}
color以外的样式能用吗？透明度和字体要注意什么
可以设 font-size、font-family、opacity，但有些限制：Firefox 不支持 background-color，所有浏览器都不支持给 placeholder 加 border 或 transform。
-
opacity是控制灰度的常用替代方案，比调 color 更安全（尤其当 input 本身 color 是变量时） - 设
font-family要小心，placeholder 继承 input 的 font 设置，但某些字体在小字号下渲染模糊，建议和 input 保持一致 - 别用
rgba()给 color 设透明，它和 opacity 行为不同：rgba 是颜色通道透明，opacity 是整个伪元素透明，后者更可控
Vue/React 里动态改 placeholder 颜色为什么无效
因为 ::placeholder 是 CSS 伪元素，不能通过绑定 class 或 style 动态切换——你改的是 input 元素本身，不是它的伪元素。想实现主题切换，得提前定义好几套 CSS 规则，再切换外层 class。
- 错误做法：
—— 这改的是输入文字颜色，不是 placeholder - 正确做法：用 class 控制，比如
，然后写.dark-theme::placeholder { color: #999; } - 如果必须 JS 控制，可用
document.styleSheets动态插入 CSSRule，但太重，不推荐
CSS 伪元素没法响应 props 或 state 变化，这点容易被忽略。真要 runtime 切换，靠 class 是目前最稳的路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
