:focus状态下placeholder颜色不变，因::placeholder不继承父元素:focus状态，须用input:focus::placeholder显式设置；完全隐藏违反可访问性，推荐opacity渐隐；动画仅限opacity/color等合成属性，避免布局重排。
focus状态下placeholder文字颜色不变化？
默认情况下，:focus 伪类不会影响 ::placeholder 的样式——因为 ::placeholder 是独立伪元素，它不继承父元素的 :focus 状态。想让输入框获得焦点时 placeholder 变色或隐藏，必须显式组合写：input:focus::placeholder。
常见错误是只写 input::placeholder { color: #999; }，然后期待 focus 后自动变浅，结果毫无反应。
- 必须用组合选择器：例如
input:focus::placeholder { color: transparent; } - 注意浏览器兼容性：
::placeholder在 Firefox 中需用::-moz-placeholder（旧版），Chrome/Safari 支持::placeholder，但 IE 完全不支持 - 透明化比设为
color: #fff更安全，避免深色主题下文字“消失”却仍占位
placeholder在focus后完全消失是否合理？
很多设计直接让 input:focus::placeholder { display: none; }，但这违反可访问性原则：用户可能刚输入就误失焦（比如点错地方），再回来时已忘记字段预期格式（如“YYYY-MM-DD”或“+86 138…”）。WCAG 建议保留上下文提示。
- 推荐渐隐而非突兀消失：
input:focus::placeholder { opacity: 0.2; transition: opacity 0.2s; } - 对带图标的输入框（如搜索框带放大镜），可配合
padding-left微调，避免 placeholder 文字与图标重叠 - 如果字段有独立 label（且视觉可见），才考虑完全隐藏；否则至少保留在 focus 初期短暂显示
不同输入类型（type="email"/"tel"）的placeholder适配问题
type 属性本身不影响 ::placeholder 渲染，但不同 type 触发的原生校验和软键盘行为会影响 placeholder 的实际可见时机。例如 iOS Safari 在 type="tel" 上常延迟渲染 placeholder，直到用户首次点击。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖 placeholder 做格式说明（如“请输入手机号”），应结合
label或 aria-describedby - 对
type="number"，部分安卓浏览器会忽略::placeholder样式，建议降级为type="text"+inputmode="numeric" - 测试真机：模拟器常不触发真实软键盘逻辑，placeholder 消失/闪现问题多在真机上暴露
placeholder动画导致重排或卡顿？
给 ::placeholder 加 transform 或 font-size 动画容易触发 layout，尤其在低端 Android 设备上。Chrome DevTools 的 Rendering 面板中开启 “Paint flashing”，能明显看到 placeholder 区域频繁重绘。
- 仅使用
opacity、color、transition这类合成属性（composited properties） - 避免在
::placeholder上设置margin、padding、line-height——它们会改变布局流 - 若需“浮动 label”效果，请用真实 DOM 元素 + JavaScript 控制，而非强撑 placeholder 动画
