直接用 ::placeholder 伪元素修改颜色，但需兼容各浏览器前缀：Chrome 57+/Firefox 51+/Safari 10.1+支持无前缀；老版本需分别添加 ::-webkit-input-placeholder、::-moz-placeholder（Firefox 51前为单冒号）、:-ms-input-placeholder（IE10–11）。
Chrome/Firefox/Safari里怎么改input的placeholder颜色
直接用 ::placeholder 伪元素就行，但浏览器前缀和兼容性得手动处理。现代浏览器（Chrome 57+、Firefox 51+、Safari 10.1+）支持无前缀写法，但老版本必须加前缀，否则样式完全不生效。
- 必须写成
input::placeholder或textarea::placeholder，不能只写::placeholder（会失效） - Firefox 51之前要加
::-moz-placeholder（单冒号），51+才支持双冒号 - Chrome 49–56 和 Safari 9–10 需要
::-webkit-input-placeholder - IE10–11 只认
::-ms-input-placeholder，且只支持单冒号
示例：
input::placeholder {
color: #999;
font-size: 14px;
}
input::-webkit-input-placeholder { color: #999; }
input::-moz-placeholder { color: #999; }
input:-ms-input-placeholder { color: #999; }
placeholder文字被截断或垂直不对齐怎么办
常见于设置了 line-height、padding 或 height 的 input。placeholder 是内联内容，受行高和盒模型影响明显，不是独立块。
- 避免给
input设固定height，优先用padding控制高度 - 如果用了
line-height，确保它和padding搭配合理，否则 placeholder 会偏上或偏下 - Safari 对
line-height在 placeholder 上的渲染尤其敏感，建议在::placeholder里显式重置line-height: normal - 字体继承可能出问题：placeholder 默认用系统字体，若父级设了
font-family但没传到伪元素，需在::placeholder里重复声明
Vue/React里动态控制placeholder样式为什么无效
不是框架问题，是 CSS 作用域或样式覆盖逻辑搞错了。框架生成的 class 不会自动透传到 ::placeholder，它只响应真实 DOM 结构上的选择器。
立即学习“前端免费学习笔记（深入）”；
- scoped style（如 Vue 单文件组件）中，
::placeholder不会自动加属性选择器，必须手动写深度选择器（如:deep(input)::placeholder） - React 中用 emotion/styled-components 时，确保插件支持伪元素（比如
css`input::placeholder{}`要能正确输出） - 如果 placeholder 文字是通过
placeholder属性动态绑定的（如:placeholder="hintText"），样式本身和内容无关，别误以为要 JS 控制样式 - 检查是否被更高优先级的全局样式覆盖，比如重置库（normalize.css）或 UI 框架（Ant Design）自带的 placeholder 规则
移动端iOS输入框placeholder闪烁或消失
iOS Safari 对 ::placeholder 的渲染有缓存和时机问题，尤其在软键盘弹起/收起后容易丢样式，不是 bug，是渲染管线优化导致的副作用。
- 避免在
::placeholder里用opacity或transform，iOS 会触发重绘异常 - 不要用
transition动画 placeholder 样式，iOS 不支持伪元素动画 - 如果 placeholder 在 focus 后突然变色/消失，大概率是 focus 状态下的其他规则（如
input:focus::placeholder）没写全或冲突了 - 真机调试时发现异常，优先清空所有
::placeholder相关规则，从最简样式开始加，iOS 对 CSS 解析容错率低
真正麻烦的是混合了 Webview 场景（比如微信内置浏览器或 App 内嵌页），那里连 ::-webkit-input-placeholder 都可能被阉割，得靠 JS 插入临时 label 模拟 placeholder 行为——这点容易被忽略，但线上问题往往出在这儿。
