应使用标准语法 ::placeholder 并降级兼容 ::-webkit-input-placeholder，避免 transform/will-change 破坏渲染上下文，禁用 opacity/visibility 隐藏，通过 autocomplete/spellcheck/line-height 间接优化候选框表现。
input placeholder样式被输入法候选框遮挡怎么办
Chrome系浏览器中，中文输入时弹出的候选框会盖在 ::-webkit-input-placeholder 上，不是placeholder没生效，而是它被强行“压”在了候选框底层。本质是输入法 UI 层级高于伪元素渲染层，CSS 无法通过 z-index 调整——这个限制来自浏览器内核，不是写法问题。
- 别试图用
z-index、position: relative或transform抬高 placeholder，无效 - 输入法候选框属于系统/浏览器原生 UI，不参与 CSS 渲染流，伪元素无法与之叠层竞争
- 真实影响场景：表单校验失败后清空 input 并 focus，placeholder 瞬间闪一下就消失，用户误以为没加载样式
用 ::placeholder 替代 ::-webkit-input-placeholder 更稳妥
::placeholder 是标准语法，现代浏览器（Chrome 57+、Firefox 51+、Safari 10.1+）都支持，且对输入法候选框的兼容性略好——不是因为它能控制候选框，而是它在 focus + 输入中态下更少触发重绘异常。
- 优先写
::placeholder，再加::-webkit-input-placeholder作降级（顺序不能反） - 避免只写私有前缀，比如只用
::-moz-placeholder会导致 Safari 下 placeholder 不显示 - 不要给 placeholder 设
opacity: 0或visibility: hidden，输入过程中可能残留不可见占位，导致光标位置错乱
input::placeholder {
color: #999;
font-size: 14px;
}
input::-webkit-input-placeholder {
color: #999;
}
真正能干预候选框外观的只有 input 自身属性
浏览器不暴露候选框的 CSS 接口，但可通过 input 的几个 HTML 属性间接影响其行为和位置：
-
autocomplete="off"或autocomplete="new-password"可减少历史词干扰，让候选框更“干净”，但不会隐藏它 -
spellcheck="false"关闭拼写检查后，部分输入法（如搜狗）会简化候选栏，去掉拼音纠错项 -
style="line-height: 1.5"这类影响行高的设置，会改变候选框垂直对齐位置，避免它卡在文字中间 - 绝对不要用
height+padding组合强行撑高 input，会导致候选框锚点偏移，悬浮位置飘忽
移动端 iOS Safari 的特殊坑
iOS 15.4+ 开始，::placeholder 在软键盘弹出后会意外消失，尤其配合 transform: scale() 或 will-change: transform 时更明显——这是 WebKit 的一个已知渲染 bug，不是 CSS 写错了。
- 临时绕过：去掉所有
transform相关声明，或改用margin/padding布局 - 检测方案：用
@supports (-webkit-appearance: none)包裹 placeholder 样式，iOS 下可安全启用 - 别依赖
input:focus::placeholder做显隐切换，iOS 下 focus 状态下 placeholder 本就不该显示，加了反而触发闪烁
transform 容器里，或者父级用了 will-change: opacity——这些看似无关的优化，会悄悄破坏 placeholder 的渲染上下文。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
