必须同时声明input::placeholder、::-webkit-input-placeholder、::-moz-placeholder、::-ms-input-placeholder四个选择器且均设opacity:1；Firefox默认opacity:0.54需显式重置，Safari禁用rgba()透明度，仅支持color等有限文本属性。
直接写 ::placeholder 在 Chrome 90+、Firefox 75+、Safari 15.4+ 里能生效，但只要项目要上线，就大概率遇到 Safari 14、Firefox 52 或旧 Edge 用户——这时 placeholder 要么颜色错乱，要么整个消失，不是你 CSS 写得不对，是浏览器根本没解析那条规则。
必须同时声明四个前缀选择器
只写 input::placeholder 是最常见也最危险的省略。这会漏掉：
-
input::-webkit-input-placeholder：Safari ≤14.0、Chrome ≤56、旧版 Edge（Blink/WebKit 内核） -
input::-moz-placeholder：Firefox 19–50（注意是双冒号，:-moz-placeholder单冒号仅限 Firefox 18–19，已可忽略） -
input::-ms-input-placeholder：IE 10–11、EdgeHTML 版本 -
input::placeholder：标准语法，必须放最后，否则会被前面带前缀的规则覆盖
推荐写法是合并选择器，避免重复声明：
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input::-ms-input-placeholder {
color: #999;
font-size: 14px;
opacity: 1;
}
Firefox 的 opacity 是硬性覆盖，不能靠继承绕过
Firefox 默认给 ::-moz-placeholder 加了 opacity: 0.54，哪怕你只设了 color: #999，最终效果也是灰蒙蒙的浅色。这不是 bug，是它的默认行为。
立即学习“前端免费学习笔记（深入）”；
- 必须在每条前缀规则里都显式写
opacity: 1，不能只写在标准规则里 - 别用
rgba(153, 153, 153, 0.6)模拟半透明——Safari 对 alpha 解析不稳定，深色模式下可能直接变黑或全透 - 要实现“#999 + 60% 透明”，统一写成
color: #999; opacity: 0.6，且四条规则全都要有 - 绝对别用
inherit或currentcolor做color值，Safari 可能继承 input 的 border 色，导致文字“隐形”
哪些 CSS 属性真能用，哪些只是看着像能用
::placeholder 不是普通元素，它只接受极有限的文本类样式，而且各浏览器支持程度还不一样。
- 安全可用：
color、font-size、font-weight、line-height、text-transform、opacity - 慎用：
font-style（Safari 有时失效）、text-align（Firefox 渲染不稳定） - 根本别试：
background、border、padding、margin、transform、filter
如果发现某条样式在 DevTools 的 Computed 面板里显示为灰色或被划掉，八成是浏览器根本不支持这个属性作用于 placeholder。
框架或重置样式悄悄覆盖了你的规则
本地开发正常，上线后 placeholder 突然变黑、消失或颜色错乱？大概率不是你漏写了前缀，而是外部样式在捣鬼。
- 打开 DevTools，在 Elements 面板选中 input，点开
::placeholder，看 Computed 面板里哪条color或opacity生效——常被*::placeholder或 normalize.css 里的兜底规则覆盖 - UI 框架（如 Ant Design）常自带
opacity: 0.5，得用更高权重覆盖，比如.my-form input::placeholder - Vue 的
<style scoped>会让::placeholder失效，必须写成:deep(input::placeholder) - 别对 input 使用
all: unset或all: initial，它们会清空伪元素所有样式
真正难的从来不是写出四条规则，而是浏览器各自为政的默认行为 + 框架暗中插手的样式重置——这两块不盯死，颜色永远 unpredictable。
