CSS如何控制placeholder文字的颜色_使用--placeholder伪元素

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::placeholderSafari 和 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。 唱鸭 音乐创作全流程的AI自动作曲工具，集 AI 辅助作词、AI 自动作曲、编曲、混音于一体