需同时写四条前缀规则并设opacity:1，因旧版Firefox/IE/Chrome/Safari仅识别对应前缀，且Firefox默认opacity=0.53致颜色发灰；伪元素冒号数量必须正确，选择器需一一对应。
直接用 ::placeholder 伪元素就能改颜色，但只写这一条在旧版浏览器里会失效——Firefox 19 以下、IE 10–11、老版 Chrome/Safari 都需要对应前缀规则，漏一个就可能回归默认浅灰。
为什么写了 color 没反应？
常见原因不是语法错，而是：
- 只写了
input::placeholder { color: #666; }，没加任何前缀——Firefox 18–18、IE 10–11 完全不识别 - 把
opacity忘了，尤其在 Firefox 中默认是 0.53，导致颜色发灰（哪怕写了#000看起来也像深灰） - 误用了
input[placeholder]这类属性选择器，它选的是元素本身，不是占位符文本，对颜色无效
必须同时写的四条前缀规则
按实际兼容需求，2026 年仍需保留这四组（顺序无关，但建议按浏览器市场份额从高到低排）：
input::-webkit-input-placeholder { color: #6c757d; opacity: 1; }
input::-moz-placeholder { color: #6c757d; opacity: 1; }
input:-ms-input-placeholder { color: #6c757d; opacity: 1; }
input::placeholder { color: #6c757d; opacity: 1; }
注意：::-moz-placeholder 和 :-ms-input-placeholder 是单冒号，::-webkit-input-placeholder 和 ::placeholder 是双冒号，写反了就无效。
立即学习“前端免费学习笔记（深入）”；
只改某几个 input 的 placeholder 颜色
给目标 input 加 class 或 id，然后把前缀规则里的 input 换成对应选择器：
- 用 class：
.search-box::-webkit-input-placeholder - 用 id：
#username::-moz-placeholder - 支持组合，比如
input[type="email"]::placeholder
别写成 .search-box::placeholder, .search-box::-webkit-input-placeholder 这种混搭——前缀规则必须一一对应，否则部分浏览器会跳过整条规则。
真正容易被忽略的点是 opacity: 1：它不是“可选优化”，而是 Firefox 下让颜色准确呈现的必要条件；另外，所有前缀规则里 color 值必须一致，否则跨浏览器会出现色差。
