::placeholder 的 opacity 值常不生效，根本原因是浏览器前缀未写全或被默认样式覆盖；需同时声明所有前缀并把标准写法 ::placeholder 放最后，推荐用 rgba() 替代 opacity 以确保兼容性与对比度。
::placeholder 的 opacity 值经常不生效，根本原因不是写错了，而是浏览器前缀没写全或 opacity 被默认样式覆盖。
为什么 opacity 设了却没变化
Firefox 默认给 ::-moz-placeholder 加了 opacity: 0.53，Chrome/Safari 对 ::placeholder 也有隐式降权；只写一条规则，比如 input::placeholder { opacity: 0.8; }，在 Firefox 里会被忽略——它压根不认这个标准写法，只认 ::-moz-placeholder。
- 必须同时声明所有主流前缀：
::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder、::-ms-input-placeholder、::placeholder - 顺序很重要：把标准写法
::placeholder放在最后，否则它可能被前面的前缀规则“挡住” - 别依赖单个
opacity值去调对比度——opacity: 0会让占位符彻底不可见，且:focus 过渡会失效
用 rgba() 替代 opacity 更可靠
直接控制颜色通道比操作整个伪元素的透明度更稳定，尤其在深色背景、渐变底色或 Android WebView 下。
-
color: rgba(0, 0, 0, 0.4)比color: #000; opacity: 0.4更安全——不会削弱字体抗锯齿，也不触发层叠上下文重排 - 深色模式下，
@media (prefers-color-scheme: dark)未必能作用于::placeholder，但rgba()可以配合 JS 或 class 手动切换 - 如果设计系统规定正文用
rgba(0,0,0,0.6)，占位符统一设为rgba(0,0,0,0.35)，视觉节奏更一致
:focus::placeholder 不是“聚焦时显示”，而是“聚焦时隐藏或弱化”
占位符只在输入框为空 + 未聚焦时显示；一旦 focus，它本就会消失。所谓 :focus::placeholder 实际是控制“即将消失前的最后一帧”——适合做淡出过渡。
- 给
input加transition: color 0.15s，再分别定义input::placeholder { color: rgba(0,0,0,0.4); }和input:focus::placeholder { color: rgba(0,0,0,0); } - 不要对
::placeholder自己加transition—— 伪元素不支持 transition 属性 - 避免用
transform或scale，这些在::placeholder上完全无效
深色模式下 ::placeholder 容易失效的细节
不是所有浏览器都把 @media (prefers-color-scheme: dark) 的规则应用到 ::placeholder 上，尤其旧版 Safari 和部分 Electron 应用。
- 稳妥做法：用 class 控制，比如
<input class="dark-mode">，然后写.dark-mode::placeholder { color: rgba(255,255,255,0.5); } - 别省略
opacity: 1或rgba(..., 1)—— 否则浅色模式下也可能因浏览器默认值叠加导致过淡 - 无障碍要求至少 4.5:1 对比度，
rgba(0,0,0,0.3)在白色背景上通常不够，建议用#777或rgba(0,0,0,0.55)起手测试
真正麻烦的不是写几行 CSS，而是每个浏览器对伪元素解析的细微差异——前缀漏一个，深色模式切不到，opacity 和 rgba 混用，都可能导致某台设备上 placeholder 突然看不见。动手前先在 Chrome、Firefox、Safari 和真机 WebView 里各跑一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
