firefox中::placeholder默认透明度被压低，需显式声明opacity:1；safari忽略rgba()的alpha通道，应改用color+opacity；旧版edge/android webview需补全前缀；:placeholder-shown状态易因透明度异常误判。
Firefox中::placeholder默认透明度被压低
Firefox（19+）对 ::placeholder 会自动叠加一层透明度，哪怕你只写了 color，文字也会发灰、变淡。这不是 bug，是它的默认行为。
必须显式声明 opacity: 1 才能还原真实颜色值。否则即使设了 color: #333，实际看起来可能像 #666 甚至更浅。
- 错误写法：
input::placeholder { color: #333; }→ Firefox 下仍发虚 - 正确写法：
input::placeholder { color: #333; opacity: 1; } - 如果需要半透明效果，比如
opacity: 0.7，也得明确写出来，不能依赖浏览器默认
Safari（尤其是 iOS/macOS 新版本）忽略 rgba() 的 alpha 通道
Safari 15.4+ 虽然支持标准 ::placeholder，但它对 rgba(100, 100, 100, 0.6) 中的 alpha 值完全无视——颜色会按 100% 不透明渲染，但又偷偷叠加自己的内部透明逻辑，结果常是文字突然“消失”或极淡不可见。
根本原因：Safari 把 color 和 opacity 当作两个独立控制项，且不兼容 rgba() 的 alpha。
- 别用：
color: rgba(153, 153, 153, 0.6); - 改用：
color: #999; opacity: 0.6; - 深色背景配浅 placeholder？优先调
color值（如#ccc），而不是靠opacity: 0.3去“压暗”，后者在 Safari 下容易直接不可见
兼容旧版 Edge / Android WebView 必须补全前缀写法
EdgeHTML（Edge 17–18）和部分 Android 系统 WebView（如 Android 7–9 搭载 Chrome 50–65 内核）根本不认 ::placeholder，只识别带前缀的旧语法。
只写标准写法，在这些环境里等于没写；只写 ::-webkit-input-placeholder，则在新版 Safari 或 Firefox 里会失效。
- 三者并列是最小可行方案：
input::-webkit-input-placeholder、input::-moz-placeholder、input::-ms-input-placeholder - 顺序不关键，但建议把标准
input::placeholder放最后，方便未来清理 - 注意：
::-moz-placeholder在 Firefox 中需单独处理opacity（同上一条），而::-ms-input-placeholder不支持opacity，只能靠color控制明暗
:placeholder-shown 与透明度设置的耦合风险
有人用 :not(:placeholder-shown) 来做非空态样式切换，比如输入后 placeholder 隐藏、边框变色。但如果 placeholder 本身因透明度异常没显示，:placeholder-shown 就不会触发，导致状态判断错乱。
这问题在 Safari + opacity: 0.2 组合下特别明显：文字看似“没了”，其实是太淡，但浏览器仍认为它在显示，:placeholder-shown 保持为 true。
- 调试时可用 DevTools 强制 toggle
:placeholder-shown看是否响应 - 避免把 placeholder 可见性作为唯一状态依据；必要时结合
value.length > 0或input.checkValidity()辅助判断 - 真正要隐藏 placeholder，优先用 JS 清空
placeholder属性，而不是仅靠样式压到opacity: 0
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
