input::placeholder 需同时写四条带前缀的规则并确保 Firefox 加 opacity: 1，否则旧版浏览器失效；常见失效原因包括语法错误、优先级不足、UI 框架重置及深色模式适配缺失。
直接写 input::placeholder { color: #666; } 就能生效，但只写这一行在旧版 Firefox、IE 或 Safari 里大概率失效——必须补全前缀，且 Firefox 还得额外加 opacity: 1。
为什么 ::placeholder 写了却没反应
最常见原因是浏览器不识别标准语法，或被更高优先级样式覆盖：
-
::placeholder是双冒号，写成:placeholder（单冒号）或:: placeholder（带空格）完全无效 - 全局 CSS 里可能有
input { color: #333; }这类规则，而input::placeholder的默认优先级低于标签选择器，颜色被继承覆盖 - UI 框架（如 Element Plus、Ant Design）会主动重置
::placeholder，比如设color: #bfbfbf+opacity: 0.5，你的规则得写得更具体才能压过它，例如.my-form input::placeholder - DevTools 里看到
::placeholder样式被划掉？说明它没匹配到元素，或被其他同名规则干掉了
input::placeholder 必须搭配的前缀和 hack
现代浏览器（Chrome 57+、Firefox 52+、Edge 79+）支持标准写法，但存量项目仍需兼容旧环境。以下四条必须一起写，顺序不能乱：
input::placeholder {
color: #666;
opacity: 1;
}
input::-webkit-input-placeholder {
color: #666;
}
input::-moz-placeholder {
color: #666;
opacity: 1;
}
input::-ms-input-placeholder {
color: #666;
}
注意：::-moz-placeholder 和 :-moz-placeholder（单冒号）是两回事，前者是 Firefox 19+，后者是更早版本；但实际只需写 ::-moz-placeholder 并配 opacity: 1 即可覆盖绝大多数情况。
立即学习“前端免费学习笔记（深入）”；
深色背景或动态状态下的颜色处理
写死 color: #999 在深色背景上会糊成一片，也不能靠 JS 直接改伪元素样式（它不暴露在 DOM 中）：
- 用
@media (prefers-color-scheme: dark)手动切颜色：@media (prefers-color-scheme: dark) { input::placeholder { color: #a0aec0; } } - 想根据表单校验状态变色？别用内联 style，而是切换 class：
<input :class="{ 'error-field': hasError }">，再写.error-field::placeholder { color: #f44; } - 避免用
rgba(0,0,0,0.5)控制灰度——不同浏览器对 rgba + 伪元素的 opacity 解析不一致，老 Safari 可能直接忽略 alpha 值
真正容易被忽略的是 Firefox 的 opacity: 1 强制要求和 UI 框架里隐藏的重置规则——光在 Chrome 里看着正常，不代表上线后没问题，务必在 Firefox 旧版和 IE 11 的真实环境里点开输入框确认。
