placeholder颜色不生效需同时写四套带厂商前缀的伪元素选择器，并在每条规则中显式声明color、font-family等属性，避免继承和字体不一致问题。
input placeholder颜色不生效？检查伪元素选择器写法
浏览器对 ::placeholder 的支持有差异，直接写 input::placeholder 在 Safari 或旧版 Edge 可能完全没反应。必须加厂商前缀才能覆盖主流环境。
- Chrome / Firefox / 新 Edge：支持
::placeholder - Safari（≤15.6）：只认
::-webkit-input-placeholder - Firefox 18–50：需要
::-moz-placeholder（注意是单冒号） - IE10–11：用
:-ms-input-placeholder（也是单冒号）
实际项目中建议四者都写，顺序无关，但缺一不可。
为什么写了color却还是灰色？优先级和继承问题
::placeholder 是伪元素，它的样式受父级 color 影响，如果 input 本身设了 color: #999，又没在伪元素里显式重写，有些浏览器会继承——尤其 Safari。
- 务必在每个伪元素规则里单独声明
color，不要依赖继承 - 避免用
!important，它在部分 Safari 版本中会让 placeholder 完全消失 - 如果 input 外层有
font-size或line-height设置，placeholder 文字可能被裁切，需同步调整font-size
示例：
立即学习“前端免费学习笔记（深入）”；
input::placeholder { color: #666; }
input::-webkit-input-placeholder { color: #666; }
input::-moz-placeholder { color: #666; }
input:-ms-input-placeholder { color: #666; }
placeholder文字变粗或模糊？字体设置要一致
placeholder 默认使用系统等宽字体或非衬线体，一旦给 input 设了 font-family: 'PingFang SC', sans-serif，但没同步到伪元素，就会出现字体回退、字重不一致、甚至渲染模糊。
- 所有伪元素规则里必须复制 input 的
font-family、font-weight、font-size - 不要用
font简写，它会重置line-height，导致 placeholder 垂直偏移 - 移动端 iOS 上，
font-size小于 16px 可能触发自动缩放，placeholder 显示异常
Vue/React里动态改placeholder颜色？别直接操作style
框架组件常把 input 封装成自定义控件，::placeholder 是 CSS 伪元素，无法用 style 属性动态控制。想换色只能靠 class 切换或注入 style 标签。
- 推荐方案：预设多个 class，如
.input--red-placeholder，通过绑定 class 控制 - 避免方案：用 JS 拼接
<style></style>标签注入，容易重复或泄漏 - 注意 SSR 场景：服务端渲染时
::placeholder不生效，颜色会 fallback 到浏览器默认，需在客户端 hydration 后补上
复杂点在于：伪元素样式不能用内联 style，也不能用 CSS-in-JS 的动态插值（除非它生成真实 class），这个限制容易被忽略。
