CSS控制输入框占位符颜色的方法

本文深入解析了CSS中控制输入框占位符（placeholder）颜色的完整实践方案，涵盖跨浏览器兼容性处理（需添加WebKit、Mozilla、MS等前缀并配合!important提升优先级）、排版对齐难题（强调line-height与padding的协同设置以避免文字截断或偏移）、暗色模式适配（利用prefers-color-scheme媒体查询动态切换颜色）、以及在Vue/React等框架中实现状态驱动的动态变色（推荐通过class切换而非内联样式）。文章不仅指出常见失效原因（如伪元素被scoped隔离、字体继承异常、属性支持限制），还给出可落地的优化建议，帮助开发者一次性解决placeholder样式顽疾。

input placeholder颜色不生效？检查伪元素选择器写法

直接写 input::placeholder 是最简方案，但老版本浏览器（比如 IE、旧版 Safari）不认这个，得加带前缀的变体。光写 color 不够，有些浏览器默认会覆盖成灰色，必须用 !important 才能压过内置样式。

• ::placeholder 是标准写法，Chrome 57+、Firefox 51+、Edge 79+ 支持
• 兼容旧版要补上：::-webkit-input-placeholder（Safari/Chrome）、::-moz-placeholder（Firefox 18–50）、:-ms-input-placeholder（IE10–11）
• 如果用了 CSS-in-JS 或 scoped style（如 Vue 的