必须为input::placeholder添加浏览器前缀：firefox用::-moz-placeholder，旧版edge用::-ms-input-placeholder，现代浏览器支持标准写法；css变量需在:root声明，仅color属性可靠生效，避免使用opacity、font-family等无效属性。
input::placeholder 选择器必须加浏览器前缀
Chrome、Edge 和新版 Safari 默认支持 ::placeholder，但 Firefox 仍需 ::-moz-placeholder，旧版 Edge（EdgeHTML）要 ::-ms-input-placeholder。不加前缀会导致部分浏览器占位符颜色回退到默认灰（#999），尤其在企业内网环境里，老版本 Edge 还很常见。
实操建议：
- 始终按顺序写全三套规则，把标准写法放最后，让现代浏览器覆盖旧规则
- 不要只依赖 CSS 变量定义颜色，前缀规则里也得用变量，否则变量失效
- 避免在
::placeholder里写!important——它在某些旧浏览器中会直接忽略整条规则
input::placeholder { color: var(--placeholder-color); }
input::-moz-placeholder { color: var(--placeholder-color); }
input::-ms-input-placeholder { color: var(--placeholder-color); }
CSS 变量必须在 :root 或父级作用域声明
如果把 --placeholder-color 定义在某个 .form-group 里，那只有它内部的 input 能继承；表单散落在不同组件中时，很容易漏掉或重复定义。
常见错误现象：某几个输入框占位符变蓝了，另外几个还是灰色，查了半天发现是变量作用域没对齐。
实操建议：
- 统一在
:root中声明基础变量，比如:root { --placeholder-color: #666; } - 如需主题切换，用
html[data-theme="dark"]切换变量值，而不是重写整个::placeholder规则 - 避免在
input元素上用style="--placeholder-color: red"——它无法被::placeholder伪元素读取
color 是唯一可靠可继承的占位符样式属性
::placeholder 支持的样式非常有限：color 稳定可用，font-size 和 opacity 在部分浏览器中有兼容问题，background、border 等完全无效。曾有人试图用 opacity: 0.7 统一淡显效果，结果在 Firefox 中失效，占位符反而比文字还亮。
使用场景：仅需控制颜色一致性时，color + CSS 变量是最小可行方案；若还要微调字号或间距，得靠 JS 动态插入带 class 的 span 模拟，代价远高于收益。
实操建议：
- 别在
::placeholder里写font-family——它不会生效，且可能触发 Safari 的渲染 bug - 想让占位符更“轻”，优先调低
color的亮度（比如#999→#bbb），而不是碰opacity - 移动端 iOS Safari 对
color的解析最严格，十六进制和 rgb() 都行，hsl() 在某些版本里会 fallback 到黑色
表单重置后 placeholder 颜色可能意外恢复默认
当用户点击 <button type="reset"></button> 或调用 form.reset() 后，Chrome 有时会强制重绘 input，导致 ::placeholder 样式短暂丢失 1 帧，看起来像闪一下默认灰色。这不是 bug，而是浏览器重置 input 状态时未同步刷新伪元素样式。
性能影响不大，但视觉割裂感强，尤其在深色模式下特别明显。
实操建议：
- 不用 JS 强制重设 value 或 focus 来“修复”，这反而增加重排
- 如果必须干预，监听
reset事件后给 input 加个class触发重绘，比如input.classList.add('resetting')+.resetting::placeholder多写一遍规则 - 更稳妥的做法是：禁用原生 reset 按钮，改用 JS 清空所有
input.value并手动触发input事件，完全绕过浏览器 reset 行为
::placeholder 规则是否写全、是否在正确作用域里被读取。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
