必须同时声明四套前缀选择器（input::placeholder、::-webkit-input-placeholder、::-moz-placeholder、::-ms-input-placeholder）并显式设置opacity:1，否则Safari 15.3及更早版本和Firefox 50–51等旧环境会忽略样式或默认降透明度导致颜色变浅。
为什么写了::placeholder但 Safari/Firefox 里颜色还是不对
不是语法写错了，是浏览器根本没匹配到你的规则。Safari 15.3 及更早版本完全忽略 ::placeholder，只认 ::-webkit-input-placeholder；Firefox 50–51 之间有断层，::-moz-placeholder（双冒号）从 51+ 才稳定支持，50 会静默失效。你只写标准写法，等于在这些环境里“没写”。
常见错误现象包括：本地 Chrome 正常，测试机 Firefox 占位符变浅灰、iOS Safari 里直接消失、上线后突然全变黑。
- 必须同时声明四套：
input::placeholder、input::-webkit-input-placeholder、input::-moz-placeholder、input::-ms-input-placeholder - 顺序建议把标准写法放最后——避免它被前面带前缀的同名规则意外覆盖
- 别用泛选器如
*::placeholder，它无效；也别漏掉textarea，如果项目里用了文本域就得单独加
opacity 和 color 在 Firefox 里为什么总被“打折”
Firefox 默认给 ::-moz-placeholder 加了 opacity: 0.54，哪怕你只设了 color: #999，最终渲染出来也是灰蒙蒙的 #6d6d6d。这不是 bug，是它的默认行为。
更麻烦的是，只写 opacity: 1 不够稳：Firefox 49–50 对这个声明支持不全，有些旧版甚至会忽略它。
- 必须在每条前缀规则里都显式写
opacity: 1，不能只靠继承或省略 - 禁用
rgba()控制透明度——Safari 对 alpha 通道解析不稳定，深色模式下尤其容易变全黑或全透 - 设计稿要求“#999 + 60% 透明”，不要写
color: rgba(153, 153, 153, 0.6)，改用color: #999; opacity: 0.6并确保四条规则里都带上
哪些 CSS 属性其实根本不起作用
::placeholder 不是普通元素，它没有盒模型、不能定位、也不响应布局类样式。浏览器只允许极小范围的文本类属性生效，其余会被静默丢弃，且不报任何警告。
你反复调 padding 或 background 却没反应，不是代码漏了，是浏览器压根不认。
- 安全可用：
color、font-size、font-weight、line-height（仅在font简写中有效）、text-transform、opacity - 慎用：
font-style（Safari 有时失效）、text-align（Firefox 对input无效，只对textarea生效） - 绝对别试：
background、border、padding、margin、transform、filter、display、visibility - 别用
inherit或currentcolor做color值——Safari 可能继承 input 的边框色，导致文字“隐形”
框架重置或高权重 CSS 怎么干扰 ::placeholder
常见现象：本地开发一切正常，上线后 placeholder 突然变黑、变粗、或彻底不显示。大概率是 UI 框架（如 Bootstrap、Ant Design）或全局重置样式（比如 * { all: unset; } 或 input { appearance: none; }）切断了 ::placeholder 的渲染通道。
它本质是个伪元素，和 ::before 一样受层叠规则约束，权重不够就会被盖掉。
- 用完整选择器链提权，比如
.form-control input::placeholder，而不是只写input::placeholder - 检查是否有更高优先级规则（比如带
!important的color）影响了父级input，间接压制了伪元素 - Chrome DevTools 里右键检查 placeholder 文本 → “Computed” 面板看最终生效的
color和opacity值，再点“Styles”看哪条规则被划掉或灰色显示
真正难搞的从来不是写法本身，而是你以为“写全了就完事”，结果在某个 iOS 版本或某次框架升级后，placeholder 突然集体失联——往往是因为漏了一条前缀、少了一个 opacity: 1，或者某个没人记得的全局重置规则悄悄动了手脚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
