::placeholder的opacity失效主因是浏览器前缀未全覆盖及opacity值过低；应同时声明所有前缀、用rgba替代opacity、通过:focus::placeholder实现过渡、并在深色模式下单独重写样式。
为什么
设了
却没生效
常见原因是浏览器默认样式优先级高于自定义规则，或者未覆盖所有前缀变体。Chrome/Edge 用
，Firefox 需要
（单冒号），Safari 旧版还识别
。只写一个
伪元素
，大概率在某个浏览器里完全失效。
实操建议：
必须同时声明所有主流前缀，顺序建议：标准写法放最后，确保它能覆盖前面的（部分浏览器会忽略不识别的前缀，但解析到标准写法时才真正生效）
值不能是
—— 这会导致占位符彻底不可见且无法触发
下的过渡动画；推荐用
～
保留视觉引导
避免在
中设置
同时又设
，两者叠加可能导致色值过淡或对比度不足（尤其深色背景）
里能不能用
替代
可以，而且更可控。用
比
更安全，因为它只影响颜色通道，不触发整个伪元素的层叠上下文重排，也不会意外削弱字体抗锯齿效果。
使用场景：
立即学习
“
前端免费学习笔记（深入）
”；
当输入框背景是渐变或图片时，
会让占位符“发虚”，而
保持边缘清晰
需要和设计系统中其他文本的透明度数值对齐（比如正文用
，占位符就统一用
）
某些 Android WebView 对
渲染异常，
兼容性更稳
如何让
在
时平滑变色或淡出
直接对
设置
是无效的——伪元素本身不支持过渡动画。正确做法是控制其父
的状态，用属性切换来驱动变化。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
实操建议：
给
添加
规则，并在里面改
或
；浏览器会自动触发过渡（前提是基础状态也定义了相同属性）
过渡时间别超过
，否则用户聚焦后占位符“慢半拍”消失，体验割裂
不要依赖
或
动画，
不支持这些属性
深色模式下
容易被忽略的兼容问题
不是所有浏览器都把
应用到
上。Safari 15.4+ 才开始支持，旧版仍沿用系统默认灰度色，导致在深背景上几乎看不见。
关键处理点：
务必在深色模式媒体查询内重新声明
，不能只靠 CSS 变量继承
避免用
，它在伪元素中行为不稳定，尤其在暗色主题切换时可能卡在旧值
测试时重点看 iOS Safari 和 Windows Edge 的旧内核版本，它们对
+ 伪元素的组合支持最弱
复杂点在于：你得同时兼顾前缀、透明度控制、焦点动效、深色适配——四个维度稍有遗漏，UI 就会在某个设备上“掉一帧质感”。
::placeholderopacity::placeholder::-moz-placeholder::-webkit-input-placeholderopacity0:focus0.50.7::placeholdercoloropacity::placeholderrgba()opacityrgba(0, 0, 0, 0.4)opacity: 0.4opacityrgba()rgba(0,0,0,0.6)0.4opacityrgba()::placeholder:focus::placeholdertransitioninput:focus::placeholdercoloropacity0.2stransformscale::placeholderinput {
transition: color 0.15s;
}
input::placeholder {
color: rgba(0, 0, 0, 0.5);
}
input:focus::placeholder {
color: rgba(0, 0, 0, 0.2);
}::placeholder@media (prefers-color-scheme: dark)::placeholder::placeholdercurrentColorprefers-color-scheme